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样式表内部的属性。请阅读cssfilter以了解更多信息。
用法：
类别： 外观属性
值：<funciri>|none|inherit
可变性： YES
<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>元素处理。
用法：
类别： 无