defs
svg允许我们定义以后需要重复使用的图形元素。建议把所有需要再次使用的元素定义在defs元素里面。这样做可以增加svg内容的易读性和可访问性。在defs元素定义的元素不会直接呈现。你可以在你的视口的任意地方利用<use>元素呈现这些元素。
用法：
类别： 容器元素，结构元素
允许的内容物： 任意数量、任意排序的下列元素：动画元素、描述性元素、形状元素、结构化元素、渐变元素、 <a>, <altGlyphDef>, <clipPath>, <colorprofile>, <cursor>, <filter>, <font>, <fontface>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>
实例：
1<svg width="80px" height="30px" viewBox="0 0 80 30" 2 xmlns="http://www.w3.org/2000/svg"> 3 4 <defs> 5 <linearGradient id="Gradient01"> 6 <stop offset="20%" stop-color="#39F" /> 7 <stop offset="90%" stop-color="#F3F" /> 8 </linearGradient> 9 </defs> 10 11 <rect x="10" y="10" width="60" height="10" 12 fill="url(#Gradient01)" /> 13</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>](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FElement%2Fa)、``[<defs>](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FElement%2Fdefs)、``[<glyph>](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FElement%2Fglyph)、``[<g>](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FElement%2Fg)、``[<marker>](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FElement%2Fmarker)、``[<missing-glyph>](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FElement%2Fmissing-glyph)、``[<pattern>](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FElement%2Fpattern)、``[<svg>](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FElement%2Fsvg)、``[<switch>](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FElement%2Fswitch)、<symbol>
feColorMatrix
该滤镜基于转换矩阵对颜色进行变换。每一像素的颜色值(一个表示为[红,绿,蓝,透明度] 的矢量) 都经过矩阵乘法 (matrix multiplated) 计算出的新颜色。
用法：
类别： 滤镜元素
允许的内容物： 任意数量、任意排序的下列元素：<animate>, [<set>](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FElement%2Fset)
1<svg width="100%" height="100%" viewBox="0 0 150 360" 2 preserveAspectRatio="xMidYMid meet" 3 xmlns="http://www.w3.org/2000/svg" 4 xmlns:xlink="http://www.w3.org/1999/xlink"> 5 6 <text x="70" y="50">Reference</text> 7 <g> 8 <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" /> 9 <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" /> 10 <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" /> 11 </g> 12 13 14 <text x="70" y="120">matrix</text> 15 16 <filter id="colorMeMatrix"> 17 <feColorMatrix in="SourceGraphic" 18 type="matrix" 19 values="0 0 0 0 0 20 1 1 1 1 0 21 0 0 0 0 0 22 0 0 0 1 0" /> 23 </filter> 24 25 <g filter="url(#colorMeMatrix)"> 26 <circle cx="30" cy="100" r="20" fill="blue" fill-opacity="0.5" /> 27 <circle cx="20" cy="120" r="20" fill="green" fill-opacity="0.5" /> 28 <circle cx="40" cy="120" r="20" fill="red" fill-opacity="0.5" /> 29 </g> 30 31 32 <text x="70" y="190">saturate</text> 33 34 <filter id="colorMeSaturate"> 35 <feColorMatrix in="SourceGraphic" 36 type="saturate" 37 values="0.2" /> 38 </filter> 39 40 <g filter="url(#colorMeSaturate)"> 41 <circle cx="30" cy="170" r="20" fill="blue" fill-opacity="0.5" /> 42 <circle cx="20" cy="190" r="20" fill="green" fill-opacity="0.5" /> 43 <circle cx="40" cy="190" r="20" fill="red" fill-opacity="0.5" /> 44 </g> 45 46 47 <text x="70" y="260">hueRotate</text> 48 49 <filter id="colorMeHueRotate"> 50 <feColorMatrix in="SourceGraphic" 51 type="hueRotate" 52 values="180" /> 53 </filter> 54 55 <g filter="url(#colorMeHueRotate)"> 56 <circle cx="30" cy="240" r="20" fill="blue" fill-opacity="0.5" /> 57 <circle cx="20" cy="260" r="20" fill="green" fill-opacity="0.5" /> 58 <circle cx="40" cy="260" r="20" fill="red" fill-opacity="0.5" /> 59 </g> 60 61 62 <text x="70" y="320">luminanceToAlpha</text> 63 64 <filter id="colorMeLTA"> 65 <feColorMatrix in="SourceGraphic" 66 type="luminanceToAlpha" /> 67 </filter> 68 69 <g filter="url(#colorMeLTA)"> 70 <circle cx="30" cy="310" r="20" fill="blue" fill-opacity="0.5" /> 71 <circle cx="20" cy="330" r="20" fill="green" fill-opacity="0.5" /> 72 <circle cx="40" cy="330" r="20" fill="red" fill-opacity="0.5" /> 73 </g> 74</svg>
示例
foOffset
该输入图像作为一个整体，在属性[dx](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FAttribute%2Fdx)和属性[dy](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FAttribute%2Fdy)的值指定了它的偏移量。
用法：
类别： 滤镜元素
允许的内容物： 任意数量、任意排序的下列元素：<animate>, <set>
feMerge
feMerge滤镜允许同时应用滤镜效果而不是按顺序应用滤镜效果。利用[result](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FSVG%2FAttribute%2Fresult)存储别的滤镜的输出可以实现这一点，然后在一个 <feMergeNode>子元素中访问它。
用法：
类别： 滤镜元素
允许的内容物： 任意数量、任意排序的下列元素：<feMergeNode>
feMergeNode
feMergeNode元素拿另一个滤镜的结果，让它的父<feMerge>元素处理。
用法：
类别： 无