SVG的几个标签元素
defs
svg允许我们定义以后需要重复使用的图形元素。建议把所有需要再次使用的元素定义在defs元素里面。这样做可以增加svg内容的易读性和可访问性。在defs元素定义的元素不会直接呈现。你可以在你的视口的任意地方利用<use>元素呈现这些元素。
用法：
类别： 容器元素，结构元素
允许的内容物： 任意数量、任意排序的下列元素：动画元素、描述性元素、形状元素、结构化元素、渐变元素、 <a>, <altGlyphDef>, <clipPath>, <colorprofile>, <cursor>, <filter>, <font>, <fontface>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>
实例：
<svg width="80px" height="30px" viewBox="0 0 80 30" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="Gradient01"> <stop offset="20%" stop-color="#39F" /> <stop offset="90%" stop-color="#F3F" /> </linearGradient> </defs> <rect x="10" y="10" width="60" height="10" fill="url(#Gradient01)" /> </svg>
pattern
使用预定义的图形对一个对象进行填充或描边，就要用到pattern元素。pattern元素让预定义图形能够以固定间隔在x轴和y轴上重复(或平铺)从而覆盖要涂色的区域。先使用pattern元素定义图案，然后在给定的图形元素上用属性fill或属性stroke引用用来填充或描边的图案。
用法：
类别： 容器元素
允许的内容物： 任意数量、任意排序的下列元素：动画元素、描述性元素、形状元素、结构化元素、渐变元素、<a>, <altGlyphDef>, <clipPath>, <colorprofile>, <cursor>, <filter>, <font>, <fontface>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>
marker
marker元素定义了在特定的<path>元素、<line>元素、<polyline>元素或者<polygon>元素上绘制的箭头或者多边标记图形。
用法：
类别： 容器元素
允许的内容物：任意数量、任意排序的下列元素：动画元素、描述性元素、形状元素、结构化元素、渐变元素、 <a>, <altGlyphDef>, <clipPath>, <colorprofile>, <cursor>, <filter>, <font>, <fontface>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>
filter
属性filter定义了由<filter>元素定义滤镜效果，该滤镜效果将应用到该元素上。
作为一个外观属性，它可以直接用作CSS样式表内部的属性。请阅读css filter以了解更多信息。
用法：
类别： 外观属性
值： <funciri> | none | inherit
可变性： YES
规范文档： SVG 1.1 (2nd Edition)
<funciri>元素的引用，它定义了将要应用到该元素的滤镜效果。none不对该元素应用任何滤镜效果。
下列元素可以使用filter属性：图形元素 »、<a>、<defs>、<glyph>、<g>、<marker>、<missing-glyph>、<pattern>、<svg>、<switch>、<symbol>
feColorMatrix
该滤镜基于转换矩阵对颜色进行变换。每一像素的颜色值(一个表示为[红,绿,蓝,透明度] 的矢量) 都经过矩阵乘法 (matrix multiplated) 计算出的新颜色。
用法：
类别： 滤镜元素
允许的内容物： 任意数量、任意排序的下列元素：<animate>, <set>
<svg width="100%" height="100%" viewBox="0 0 150 360" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text x="70" y="50">Reference</text> <g> <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" /> <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" /> <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" /> </g> <text x="70" y="120">matrix</text> <filter id="colorMeMatrix"> <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 1 1 1 1 0 0 0 0 0 0 0 0 0 1 0" /> </filter> <g filter="url(#colorMeMatrix)"> <circle cx="30" cy="100" r="20" fill="blue" fill-opacity="0.5" /> <circle cx="20" cy="120" r="20" fill="green" fill-opacity="0.5" /> <circle cx="40" cy="120" r="20" fill="red" fill-opacity="0.5" /> </g> <text x="70" y="190">saturate</text> <filter id="colorMeSaturate"> <feColorMatrix in="SourceGraphic" type="saturate" values="0.2" /> </filter> <g filter="url(#colorMeSaturate)"> <circle cx="30" cy="170" r="20" fill="blue" fill-opacity="0.5" /> <circle cx="20" cy="190" r="20" fill="green" fill-opacity="0.5" /> <circle cx="40" cy="190" r="20" fill="red" fill-opacity="0.5" /> </g> <text x="70" y="260">hueRotate</text> <filter id="colorMeHueRotate"> <feColorMatrix in="SourceGraphic" type="hueRotate" values="180" /> </filter> <g filter="url(#colorMeHueRotate)"> <circle cx="30" cy="240" r="20" fill="blue" fill-opacity="0.5" /> <circle cx="20" cy="260" r="20" fill="green" fill-opacity="0.5" /> <circle cx="40" cy="260" r="20" fill="red" fill-opacity="0.5" /> </g> <text x="70" y="320">luminanceToAlpha</text> <filter id="colorMeLTA"> <feColorMatrix in="SourceGraphic" type="luminanceToAlpha" /> </filter> <g filter="url(#colorMeLTA)"> <circle cx="30" cy="310" r="20" fill="blue" fill-opacity="0.5" /> <circle cx="20" cy="330" r="20" fill="green" fill-opacity="0.5" /> <circle cx="40" cy="330" r="20" fill="red" fill-opacity="0.5" /> </g> </svg>
foOffset
该输入图像作为一个整体，在属性dx和属性dy的值指定了它的偏移量。
用法：
类别： 滤镜元素
允许的内容物： 任意数量、任意排序的下列元素：<animate>, <set>
feMerge
feMerge滤镜允许同时应用滤镜效果而不是按顺序应用滤镜效果。利用result存储别的滤镜的输出可以实现这一点，然后在一个 <feMergeNode>子元素中访问它。
用法：
类别： 滤镜元素
允许的内容物： 任意数量、任意排序的下列元素：<feMergeNode>
feMergeNode
feMergeNode元素拿另一个滤镜的结果，让它的父<feMerge>元素处理。
用法：
类别： 无
允许的内容物： 任意数量、任意排序的下列元素：<animate>, <set>
