SVG参考手册
分类 | Elements
svg
该svg元素可用于将SVG片段嵌入当前文档（例如，HTML文档）中。这个SVG片段有自己的视口和坐标系统。
用法上下文
分类 |
集装箱元素，结构元素 |
|---|---|
允许的内容 |
任意数量的下列元素，以任何顺序排列：动画元素描述元素图形元素结构元素渐变元素<a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> |
例
考虑下面的SVG图像（代表意大利国旗）：
<svg xmlns="http://www.w3.org/2000/svg"
width="150" height="100" viewBox="0 0 3 2">
<rect width="1" height="2" x="0" fill="#008d46" />
<rect width="1" height="2" x="1" fill="#ffffff" />
<rect width="1" height="2" x="2" fill="#d2232c" />
</svg>它可以包含在HTML5文档中，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML/SVG Example</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
width="150" height="100" viewBox="0 0 3 2">
<rect width="1" height="2" x="0" fill="#008d46" />
<rect width="1" height="2" x="1" fill="#ffffff" />
<rect width="1" height="2" x="2" fill="#d2232c" />
</svg>
</body>
</html>属性
全局属性
- Conditional processing attributes »
- Core attributes »
- Document event attributes »
- Graphical event attributes »
- Presentation attributes »
class
style
externalResourcesRequired
具体属性
version
baseProfile
x
y
width
height
preserveAspectRatio
contentScriptType
contentStyleType
viewBox
DOM接口
这个元素实现了SVGSVGElement接口。
产品规格
Specification |
Status |
Comment |
|---|---|---|
Scalable Vector Graphics (SVG) 2The definition of '<svg>' in that specification. |
Candidate Recommendation |
|
Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of '<svg>' in that specification. |
Recommendation |
Initial definition |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
IE |
Opera |
Safari |
|---|---|---|---|---|---|---|
Basic support |
1.0 |
(Yes) |
1.5 (1.8) |
9.0 |
8.0 |
3.0.4 |
Feature |
Android |
Edge |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
|---|---|---|---|---|---|---|
Basic support |
3.0 |
(Yes) |
1.0 (1.8) |
No support |
(Yes) |
3.0.4 |
加载中,请稍侯......