SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 使用 XML 格式定义图像。
现在开始学习 SVG!
点击 "尝试一下" 按钮查看运行结果.
我们可以在线编辑 SVG 实例，并且在线查看运行结果!
在菜鸟教程中， 我们为您提供完整的 SVG 参考手册，其中列出了所有 W3C 推荐标准（SVG Version 1.1）中的 SVG 的元素。
SVG 是使用 XML 来描述二维图形和绘图程序的语言。
继续学习之前，你应该对以下内容有基本的了解：
如果希望首先学习这些内容，请在本站的首页选择相应的教程。
SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准。
如需阅读更多有关 W3C 的 SVG 活动的信息，请访问我们的 W3C 教程。
在 2003 年一月，SVG 1.1 被确立为 W3C 标准。
参与定义 SVG 的组织有：Sun公司（已被Oracle公司收购）、Adobe、苹果公司、IBM 以及柯达。
与其他图像格式相比，使用 SVG 的优势在于：
SVG 的主要竞争者是 Flash。
与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。
Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。
IE8和早期版本都需要一个插件 - 如Adobe SVG浏览器，这是免费提供的。
由于SVG是XML文件，SVG图像可以用任何文本编辑器创建，但它往往是与一个绘图程序一起使用，如Inkscape，更方便地创建SVG图像。
一个简单的SVG图形例子：
这里是SVG文件（SVG文件的保存与SVG扩展）：
SVG 代码解析：
第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是"独立的"，或含有对外部文件的引用。
standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。
第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"。该 DTD 位于 W3C，含有所有允许的 SVG 元素。
SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。
SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。
stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。
fill 属性设置形状内的颜色。我们把填充颜色设置为红色。
关闭标签的作用是关闭 SVG 元素和文档本身。
注释：所有的开启标签必须有关闭标签！
SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>。
SVG的代码可以直接嵌入到HTML页面中，或您可以直接链接到SVG文件。
<embed>:
语法:
结果：
<object>:
语法:
结果：
<iframe>:
语法:
结果:
在Firefox、Internet Explorer9、谷歌Chrome和Safari中，你可以直接在HTML嵌入SVG代码。
您还可以用<a>标签链接到一个SVG文件：链接到SVG文件
您还可以用<a>标签链接到一个SVG文件：
结果:
查看 SVG 文件
SVG有一些预定义的形状元素，可被开发者使用和操作：
下面的章节会为您讲解这些元素，首先从矩形元素开始。
<rect> 标签可用来创建矩形，以及矩形的变种：
下面是SVG代码：
对于Opera用户： 查看SVG文件（右键单击SVG图形预览源）。
代码解析:
让我们看看另一个例子，它包含一些新的属性：
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
代码解析：
定义整个元素的不透明度：
下面是SVG代码：
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
最后一个例子，创建一个圆角矩形：
下面是SVG代码：
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
<circle> 标签可用来创建一个圆：
下面是SVG代码：
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
代码解析：
<ellipse> 元素是用来创建一个椭圆：
椭圆与圆很相似。不同之处在于椭圆有不同的x和y半径，而圆的x和y半径是相同的：
下面是SVG代码：
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
代码解析：
下面的例子创建了三个累叠而上的椭圆：
下面是SVG代码：
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
下面的例子组合了两个椭圆（一个黄的和一个白的）：
下面是SVG代码：
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
<line> 元素是用来创建一个直线：
下面是SVG代码：
对于Opera用户：查看SVG文件右键单击SVG图形预览源）。
<polygon> 标签用来创建含有不少于三个边的图形。
多边形是由直线组成，其形状是"封闭"的（所有的线条 连接起来）。
polygon来自希腊。 "Poly"
意味 "many" ， "gon" 意味 "angle".
下面是SVG代码：
对于Opera用户： 查看SVG文件（右键单击SVG图形预览源）。
代码解析：
下面的示例创建一个四边的多边形：
下面是SVG代码：
对于Opera用户： 查看SVG文件（右键单击SVG图形预览源）。
使用 <polygon> 元素创建一个星型:
下面是SVG代码：
对于Opera用户： 查看SVG文件（右键单击SVG图形预览源）。
改变 fill-rule 属性为 "evenodd":
下面是SVG代码：
对于Opera用户： 查看SVG文件（右键单击SVG图形预览源）。
<polyline> 元素是用于创建任何只有直线的形状：
下面是SVG代码：
F对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
只有直线的另一个例子：
下面是SVG代码：
F对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
<path> 元素用于定义一个路径。
下面的命令可用于路径数据：
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
上面的例子定义了一条路径，它开始于位置150 0，到达位置75 200，然后从那里开始到225 200，最后在150 0关闭路径。
下面是SVG代码：
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
下面的例子创建了一个二次方贝塞尔曲线，A 和 C 分别是起点和终点，B 是控制点：
下面是SVG代码：
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
复杂吗？是的！！由于在绘制路径时的复杂性，强烈建议使用SVG编辑器来创建复杂的图形。
<text> 元素用于定义文本。
写一个文本：
下面是SVG代码：
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
旋转的文字：
下面是SVG代码：
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
路径上的文字：
下面是SVG代码：
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
元素可以安排任何分小组与<tspan> 元素的数量。每个<tspan> 元素可以包含不同的格式和位置。几行文本(与 <tspan> 元素):
下面是SVG代码：
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
作为链接文本（ <a> 元素）：
下面是SVG代码：
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
SVG提供了一个范围广泛stroke 属性。在本章中，我们将看看下面：
所有stroke属性，可应用于任何种类的线条，文字和元素就像一个圆的轮廓。
Stroke属性定义一条线，文本或元素轮廓颜色：
下面是SVG代码：
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
Tstroke- width属性定义了一条线，文本或元素轮廓厚度：
下面是SVG代码：
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
strokelinecap属性定义不同类型的开放路径的终结：
下面是SVG代码：
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
strokedasharray属性用于创建虚线：
下面是SVG代码：
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
SVG滤镜用来增加对SVG图形的特殊效果。
在本教程中，我们将仅展示一个可能采用的特殊效果。基础知识展示后，你已经学会使用特殊效果，你应该能够适用于其他地方。这里的关键是给你一个怎样做SVG的想法，而不是重复整个规范。
SVG可用的滤镜是：
除此之外，您可以在每个 SVG 元素上使用多个滤镜！
注意： Internet Explorer和Safari不支持SVG滤镜！
所有互联网的SVG滤镜定义在<defs>元素中。<defs>元素定义短并含有特殊元素（如滤镜）定义。
<filter>标签用来定义SVG滤镜。<filter>标签使用必需的id属性来定义向图形应用哪个滤镜？
<feGaussianBlur> 元素是用于创建模糊效果：
下面是SVG代码：
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
代码解析：
注意： Internet Explorer和Safari不支持SVG滤镜！
所有互联网的SVG滤镜定义在<defs>元素中。<defs>元素定义短并含有特殊元素（如滤镜）定义。
<filter>标签用来定义SVG滤镜。<filter>标签使用必需的id属性来定义向图形应用哪个滤镜？
<feOffset>元素是用于创建阴影效果。我们的想法是采取一个SVG图形（图像或元素）并移动它在xy平面上一点儿。
第一个例子偏移一个矩形（带<feOffset>），然后混合偏移图像顶部（含<feBlend>）：
下面是SVG代码：
对于Opera用户： 查看SVG文件（右键单击SVG图形预览源）。
代码解析：
现在，偏移图像可以变的模糊（含 <feGaussianBlur>）:
下面是SVG代码：
对于Opera用户： 查看SVG文件（右键单击SVG图形预览源）。
代码解析：
现在，制作一个黑色的阴影：
下面是SVG代码：
对于Opera用户： 查看SVG文件（右键单击SVG图形预览源）。
代码解析：
现在为阴影涂上一层颜色：
下面是SVG代码：
对于Opera用户： 查看SVG文件（右键单击SVG图形预览源）。
代码解析：
变换矩阵的定义和说明
feColorMatrix 的 matrix 是一个 4*5 的矩阵。前面 4 列是颜色通道的比例系数，最后一列是常量偏移。
上面公式中的 rr 表示 red to red 系数，以此类推。c1~c4 表示常量偏移。
第一个 4*5 矩阵为变换矩阵，第二个单列矩阵为待变换对象的像素值。右侧单列矩阵为矩阵 1 和 2 的点积结果。
这个变换矩阵看起来比较复杂，在实践上常使用一个简化的对角矩阵，即除了 rr/gg/bb/aa 取值非零外，其余行列取值为 0，这就退化成了简单的各颜色通道的独立调整。
feColorMatrix的语法:
<filter id="f1" x="0%" y="0%" width="100%" height="100%">
<feColorMatrix
result="original" id="c1" type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0" />
</filter>
上述feColorMatrix过滤器的类型值为matrix，除此之外，还有saturate（饱和度）和hueRotate（色相旋转），取值比较简单，这里不做说明。
显然当变换矩阵为单位对角矩阵时，变换结果和原值相等。
我们可以尝试调整比例系数，比如把rr的值设置为0，即去除图像中的red颜色通道含量：
渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。
SVG渐变主要有两种类型：
<linearGradient>元素用于定义线性渐变。
<linearGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。
线性渐变可以定义为水平，垂直或角渐变：
定义水平线性渐变从黄色到红色的椭圆形：
下面是SVG代码：
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
代码解析：
定义一个垂直线性渐变从黄色到红色的椭圆形：
下面是SVG代码：
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
定义一个椭圆形，水平线性渐变从黄色到红色并添加一个椭圆内文本：
下面是SVG代码：
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
代码解析：
经过测试，示例 3 中添加的文本是从自身左下角（以给出的坐标数据为原点）开始的，文字大小的改变都沿着往右上角的射线，始终在第一象限。
添加文本跟绘制图形的坐标方向是不一样的，这个点得注意。
<radialGradient>元素用于定义放射性渐变。
<radialGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。
定义一个放射性渐变从白色到蓝色椭圆：
下面是SVG代码：
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
代码解析：
定义放射性渐变从白色到蓝色的另一个椭圆：
下面是SVG代码：
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
下面的例子是把SVG代码直接嵌入到HTML代码中。
谷歌Chrome，火狐，Internet Explorer9，和Safari都支持。
注意：下面的例子将不会在Opera运行，即使Opera支持SVG - 它也不支持SVG在HTML代码中直接使用。
SVG基本形状
stroke-linecap属性定义不同类型的开放路径的终结：
SVG滤镜
feOffset、feFlood、feComposite、feMerge 以及 feMergeNode
SVG渐变
SVG杂项
| 元素 | 说明 | 属性 |
|---|---|---|
| <a> | 创建一个SVG元素周围链接 | xlink:show xlink:actuate xlink:href target |
| <altGlyph> | 允许对象性文字进行控制，来呈现特殊的字符数据 | x y dx dy rotate glyphRef format xlink:href |
| <altGlyphDef> | 定义一系列象性符号的替换 | id |
| <altGlyphItem> | 定义一系列候选的象性符号的替换 | id |
| <animate> | 随时间动态改变属性 | attributeName="目标属性名称" from="起始值" to="结束值" dur="持续时间" repeatCount="动画时间将发生" |
| <animateColor> | 定义随着时间的推移颜色转换 | by="相对偏移值" from="起始值" to="结束值" |
| <animateMotion> | 使元素沿着动作路径移动 | calcMode="动画的插补模式。可以是'discrete',
'linear', 'paced', 'spline'" path="运动路径" keyPoints="沿运动路径的对象目前时间应移动多远" rotate="应用旋转变换" xlink:href="一个URI引用<path>元素，它定义运动路径" |
| <animateTransform> | 动画上一个目标元素变换属性，从而使动画控制平移，缩放，旋转或倾斜 | by="相对偏移值" from="起始值" to="结束值" type="类型的转换其值是随时间变化。可以是 'translate', 'scale', 'rotate', 'skewX', 'skewY'" |
| <circle> | 定义一个圆 | cx="圆的x轴坐标" cy="圆的y轴坐标" r="圆的半径". 必需. + 显现属性：颜色，FillStroke，图形 |
| <clipPath> | 用于隐藏位于剪切路径以外的对象部分。定义绘制什么和什么不绘制的模具被称为剪切路径 | clip-path="引用剪贴路径和引用剪贴路径交叉" clipPathUnits="userSpaceOnUse'或'objectBoundingBox"。第二个值childern一个对象的边框，会使用掩码的一小部分单位（默认："userSpaceOnUse"）" |
| <color-profile> | 指定颜色配置文件的说明（使用CSS样式文件时） | local="本地存储颜色配置文件唯一ID" name="" rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric" xlink:href="ICC配置文件资源URI" |
| <cursor> | 定义一个独立于平台的自定义光标 | x="x轴左上角光标（默认为0）" y="y轴的左上角光标（默认为0）" xlink:href="使用光标图像URI |
| <defs> | 引用的元素容器 | |
| <desc> | 对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示 | |
| <ellipse> | 定义一个椭圆 | cx="椭圆x轴坐标" cy="椭圆y轴坐标" rx="沿x轴椭圆形的半径"。必需。 ry="沿y轴长椭圆形的半径"。必需。 + 显现属性：颜色，FillStroke，图形 |
| <feBlend> | 使用不同的混合模式把两个对象合成在一起 | mode="图像混合模式：normal|multiply|screen|darken|lighten" in="标识为给定的滤镜原始输入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="第二输入图像的混合操作" |
| feColorMatrix | SVG滤镜。适用矩阵转换 | |
| feComponentTransfer | SVG 滤镜。执行数据的 component-wise 重映射 | |
| feComposite | SVG 滤镜 | |
| feConvolveMatrix | SVG 滤镜 | |
| feDiffuseLighting | SVG 滤镜 | |
| feDisplacementMap | SVG 滤镜 | |
| feDistantLight | SVG滤镜。定义一个光源 | |
| feFlood | SVG滤镜 | |
| feFuncA | SVG 滤镜。feComponentTransfer 的子元素 | |
| feFuncB | SVG 滤镜。feComponentTransfer 的子元素 | |
| feFuncG | SVG 滤镜。feComponentTransfer 的子元素 | |
| feFuncR | SVG 滤镜。feComponentTransfer 的子元素 | |
| feGaussianBlur | SVG滤镜。执行高斯模糊图像 | |
| feImage | SVG滤镜。 | |
| feMerge | SVG滤镜。建立在彼此顶部图像层 | |
| feMergeNode | SVG 滤镜。feMerge的子元素 | |
| feMorphology | SVG 滤镜。 对源图形执行"fattening" 或者 "thinning" | |
| feOffset | SVG滤镜。相对其当前位置移动图像 | |
| fePointLight | SVG滤镜 | |
| feSpecularLighting | SVG滤镜 | |
| feSpotLight | SVG滤镜 | |
| feTile | SVG滤镜 | |
| feTurbulence | SVG滤镜 | |
| filter | 滤镜效果的容器 | |
| font | 定义字体 | |
| font-face | 描述一种字体的特点 | |
| font-face-format | ||
| font-face-name | ||
| font-face-src | ||
| font-face-uri | ||
| foreignObject | ||
| <g> | 用于把相关元素进行组合的容器元素 | id="该组的名称" fill="该组填充颜色" opacity="该组不透明度" + 显现属性: All |
| glyph | 为给定的象形符号定义图形 | |
| glyphRef | 定义要使用的可能的象形符号 | |
| hkern | ||
| <image> | 定义图像 | x="图像的左上角的x轴坐标" y="图像的左上角的y轴坐标" width="图像的宽度". 必须. height="图像的高度". 必须. xlink:href="图像的路径". 必须. + 显现属性: Color, Graphics, Images, Viewports |
| <line> | 定义一条线 | x1="直线起始点x坐标" y1="直线起始点y坐标" x2="直线终点x坐标" y2="直线终点y坐标" + 显现属性: Color, FillStroke, Graphics, Markers |
| <linearGradient> | 定义线性渐变。通过使用矢量线性渐变填充对象，并可以定义为水平，垂直或角渐变。 | id="id 属性可为渐变定义一个唯一的名称。引用必须" gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'.使用视图框或对象，以确定相对位置矢量点。 （默认为'objectBoundingBox）" gradientTransform="适用于渐变的转变" x1="渐变向量x启动点（默认0％）" y1="渐变向量y启动点（默认0％）" x2="渐变向量x的终点。 （默认100％）" y2="渐变向量y的终点。 （默认0％）" spreadMethod="'pad' or 'reflect' or 'repeat'" xlink:href="reference to another gradient whose attribute values are used as defaults and stops included. Recursive" |
| <marker> | 标记可以放在直线，折线，多边形和路径的顶点。这些元素可以使用marker属性的"marker-start"，"marker-mid"和"marker-end"，继承默认情况下或可设置为"none"或定义的标记的URI。您必须先定义标记，然后才可以通过其URI引用。任何一种形状，可以把标记放在里面。他们绘制元素时把它们附加到顶部 | markerUnits="strokeWidth'或'userSpaceOnUse"。如果是strokeWidth"那么使用一个单位等于一个笔划宽度。否则，标记尺度不会使用同一视图单位作为引用元素（默认为'strokeWidth'）" refx="标记顶点连接的位置（默认为0）" refy="标记顶点连接的位置（默认为0）" orient="'auto'始终显示标记的角度。 "auto"将计算某个角度使得X轴一个顶点的正切值（默认为0） markerWidth="标记的宽度（默认3）" markerHeight="标记的高度（默认3）" viewBox="各点"看到"这个SVG绘图区域。由空格或逗号分隔的4个值。(min x, min y, width, height)" + presentation attributes: All |
| <mask> | 度屏蔽是一种不透明度值的组合和裁剪。像裁剪，您可以使用图形，文字或路径定义掩码的部分。一个掩码的默认状态是完全透明的，也就是裁剪平面的对面的。在掩码的图形设置掩码的不透明部分 | maskUnits="'userSpaceOnUse' or 'objectBoundingBox'.设定裁剪面是否是相对完整的视窗或对象（默认：'objectBoundingBox'）" maskContentUnits="第二个掩码相对对象的图形位置使用百分比'userSpaceOnUse'或'objectBoundingBox'（默认：'userSpaceOnUse'）" x="裁剪面掩码（默认值：-10％）" y="裁剪面掩码（默认值：-10％）" width="裁剪面掩码（默认是：120％）" height="裁剪面掩码（默认是：120％）" |
| metadata | 指定元数据 | |
| missing-glyph | ||
| mpath | ||
| <path> | 定义一个路径 | d="定义路径指令" pathLength="如果存在，路径将进行缩放，以便计算各点相当于此值的路径长度" transform="转换列表" + 显现属性: Color, FillStroke, Graphics, Markers |
| <pattern> | 定义坐标，你想要的视图显示和视图的大小。然后添加到您的模式形状。该模式命中时重复视图框的边缘（可视范围） | id="用于引用这个模式的唯一ID。"必需的。 patternUnits="userSpaceOnUse'或'objectBoundingBox"。第二个值X，Y，width，height 一个会使用模式对象的边框的小部分，单位（％）。" patternContentUnits="'userSpaceOnUse'或 'objectBoundingBox'" patternTransform="允许整个表达式进行转换" x="模式的偏移量，来自左上角（默认为0）" y="模式的偏移量，来自左上角（默认为0）" width="模式平铺的宽度（默认为100％）" height="模式平铺的高度（默认为100％）" viewBox="各点"看到"这个SVG绘图区域。由空格或逗号分隔的4个值。(min x, min y, width, height)" xlink:href="另一种模式，其属性值是默认值以及任何子类可以继承。递归" |
| <polygon> | 定义一个包含至少三边图形 | points="多边形的点。点的总数必须是偶数"。必需的。 fill-rule="FillStroke演示属性的部分" + 显现属性: Color, FillStroke, Graphics, Markers |
| <polyline> | 定义只有直线组成的任意形状 | points=折线上的"点"。必需的。 + 显现属性: Color, FillStroke, Graphics, Markers |
| <radialGradient> | 定义放射性渐变。放射性渐变创建一个圆圈 | gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. 使用视图框或对象以确定相对位置的矢量点。 （默认为'objectBoundingBox）" gradientTransform="适用于渐变的变换" cx="渐变的中心点（数字或％ - 50％是默认）" cy="渐变的中心点。 （默认50％）" r="渐变的半径。 （默认50％）" fx="渐变的焦点。 （默认0％）" fy="渐变的焦点。 （默认0％）" spreadMethod="'pad' or 'reflect' or 'repeat'" xlink:href="引用到另一个渐变，其属性值作为默认值。递归" |
| <rect> | 定义一个矩形 | x="矩形的左上角的x轴" y="矩形的左上角的y轴" rx="x轴的半径（round元素）" ry="y轴的半径（round元素）" width="矩形的宽度"。必需的。 height="矩形的高度"。必需的。 + 显现属性: Color, FillStroke, Graphics |
| script | 脚本容器。（例如ECMAScript） | |
| set | 设置一个属性值指定时间 | |
| <stop> | 渐变停止 | offset="偏移停止（0到1/0％到100％）". 参考 stop-color="这个stop的颜色" stop-opacity="这个Stop的不透明度 (0到1)" |
| style | 可使样式表直接嵌入SVG内容内部 | |
| <svg> | 创建一个SVG文档片段 | x="左上角嵌入（默认为0）" y="左上角嵌入（默认为0）" width="SVG片段的宽度（默认为100％）" height="SVG片段的高度（默认为100％）" viewBox="点"seen"这个SVG绘图区域。由空格或逗号分隔的4个值。 (min x, min y, width, height)" preserveAspectRatio="'none'或任何'xVALYVAL'的9种组合,VAL是"min"，"mid"或"max"。（默认情况下none）" zoomAndPan="'magnify' or 'disable'.Magnify选项允许用户平移和缩放您的文件（默认Magnify ）" xml="最外层<svg>元素都需要安装SVG和它的命名空间： xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"" + 显现属性: All |
| switch | ||
| symbol | ||
| <text> | 定义一个文本 | x="列表的X -轴的位置。在文本中在第n个字符的位置在第n个x轴。如果后面存在额外的字符，耗尽他们最后一个字符之后放置的位置。 0是默认" y="列表的Y轴位置。（参考x）0是默认" dx="在字符的长度列表中移动相对最后绘制标志符号的绝对位置。（参考x）" dy="在字符的长度列表中移动相对最后绘制标志符号的绝对位置。（参考x）" rotate="一个旋转的列表。第n个旋转是第n个字符。附加字符没有给出最后的旋转值" textLength="SVG查看器将尝试显示文本之间的间距/或字形调整的文本目标长度。（默认：正常文本的长度）" lengthAdjust="告诉查看器，如果指定长度就尝试进行调整用以呈现文本。这两个值是'spacing'和'spacingAndGlyphs'" + 显现属性: Color, FillStroke, Graphics, FontSpecification, TextContentElements |
| textPath | ||
| title | 对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示 | |
| <tref> | 引用任何SVG文档中的<text>元素和重用 | 相同的<TEXT>元素 |
| <tspan> | 元素等同于<text>，但可以在内部嵌套文本标记以及内部本身 | Identical to the <text> element + in addition: xlink:href="引用一个<TEXT>元素" |
| <use> | 使用URI引用一个<G>,<svg>或其他具有一个唯一的ID属性和重复的图形元素。复制的是原始的元素，因此文件中的原始存在只是一个参考。原始影响到所有副本的任何改变。 | x="克隆元素的左上角的x轴" y="克隆元素的左上角的y轴" width="克隆元素的宽度" height="克隆元素的高度" xlink:href="URI引用克隆元素" + 显现属性: All |
| view | ||
| vkern |
没有水的木
257***1053@qq.com
参考地址
SVG的图形填充规则通过fill-rule属性来指定。
fill-rule
fill-rule 属性用于指定使用哪一种算法去判断画布上的某区域是否属于该图形“内部” （内部区域将被填充）。对一个简单的无交叉的路径，哪块区域是“内部” 是很直观清除的。但是，对一个复杂的路径，比如自相交或者一个子路径包围另一个子路径，“内部”的理解就不那么明确了。
fill-rule 属性提供两种选项用于指定如何判断图形的“内部”:
nonzero
字面意思是“非零”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点情况。从0开始计数，路径从左向右穿过射线则计数加1，从右向左穿过射线则计数减1。得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部。下图演示了nonzero规则:
点击查看示例SVG文件 (仅适用于支持SVG的浏览器)
evenodd
字面意思是“奇偶”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部，是偶数则认为点在外部。下图演示了evenodd 规则:
点击查看示例SVG文件 (仅适用于支持SVG的浏览器)
提示: 上述解释未指出当路径片段与射线重合或者相切的时候怎么办，因为任意方向的射线都可以，那么只需要简单的选择另一条没有这种特殊情况的射线即可。
没有水的木
257***1053@qq.com
参考地址