SVG常用元素标签列表

第一次系统化学习svg,整理了一些常用的SVG元素标签(没有整理滤镜相关)仅供参考学习。

defs:用于定义所有可能再次引用的图形元素。在defs元素中定义的图形元素不会直接呈现。你可以在你的视口的任意地方利用 元素呈现这些元素。

xmlns="http://www.w3.org/2000/svg">

fill="url(#Gradient01)" />

g:元素g是用来组合对象的容器。添加到g元素上的变换会应用到其所有的子元素上。添加到g元素的属性会被其所有的子元素继承。此外，g元素也可以用来定义复杂的对象，之后可以通过元素来引用它们。

xmlns="http://www.w3.org/2000/svg">

path:用来定义形状的通用元素。所有的基本形状都可以用path元素来创建，path中d用来绘制图形的路径。

filter:标签用来定义SVG滤镜。标签使用必需的id属性来定义向图形应用哪个滤镜.

fill="yellow" filter="url(#f1)" />

stop:用于定义一个渐变上的颜色坡度,它可以是元素或者元素的子元素。

animate:随时间动态改变属性。

xmlns="http://www.w3.org/2000/svg">

dur="10s" repeatCount="indefinite"/>

animateMotion:使元素沿着动作路径移动。

animateTransform:添加目标元素上的一个变形属性，从而允许动画控制转换、缩放、旋转或斜切。

xmlns="http://www.w3.org/2000/svg" version="1.1"

xmlns:xlink="http://www.w3.org/1999/xlink" >

attributeType="XML"

type="rotate"

from="0 60 70"

to="360 60 70"

dur="10s"

repeatCount="indefinite"/>

clipPath:自定义一个裁剪区域，当在另一个元素上使用clip-path属性引用该自定义裁剪区域的时候会将原来的图形与该裁剪区域取交集,裁剪后的图形超出裁剪区域的部分将不会响应事件。

feGaussianBlur:对输入图像进行高斯模糊，属性stdDeviation中指定的数量定义了钟形。

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

filter="url(#blurMe)" />

marker:在特定的元素、元素、元素或者元素上绘制箭头或者多边标记图形。

version="1.1">

mpath:使 元素能够引用一个外部的元素作为运动路径的定义。

pattern:使用预定义的图形对一个对象进行填充或描边。pattern元素让预定义图形能够以固定间隔在x轴和y轴上重复（或平铺）从而覆盖要涂色的区域。先使用pattern元素定义图案，然后在给定的图形元素上用属性fill或属性stroke引用用来填充或描边的图案。

symbol:用来定义一个图形模板对象，它可以用一个元素实例化。symbol元素对图形的作用是在同一文档中多次使用，添加结构和语义。结构丰富的文档可以更生动地呈现出来，类似讲演稿或盲文，从而提升了可访问性。注意，一个symbol元素本身是不呈现的。只有symbol元素的实例（亦即，一个引用了symbol的 元素）才能呈现。

x="0" y="0" width="100" height="50"/>

x="0" y="50" width="75" height="38"/>

x="0" y="100" width="50" height="25"/>

tspan:在 元素中，利用内含的tspan元素，可以调整文本和字体的属性以及当前文本的位置、绝对或相对坐标值。

You are

not

a banana

use：在SVG文档内取得目标节点，并在别的地方复制它们。它的效果等同于这些节点被深克隆到一个不可见的DOM中，然后将其粘贴到use元素的位置，很像HTML5中的克隆模板元素。因为克隆的节点是不可见的，所以当使用CSS样式化一个use元素以及它的隐藏的后代元素的时候，必须小心注意。隐藏的、克隆的DOM不能保证继承CSS属性，除非你明文设置使用CSS继承。出于安全原因，一些浏览器可能在use元素上应用同源策略，还有可能拒绝载入xlink:href属性内的跨源URI。

black

red

blue

vkern:用于在自上而下的字体中精细调整两个雕刻文字的垂直距离。