正文
3、功能标签
除了图形标签，在容器中还能使用一些功能标签实现特定功能
（1）展示
使用 <use> 标签可以复制并展示一个图形，常用的属性如下：
href：指定要复制的节点x：左上角 X 轴坐标y：左上角 Y 轴坐标
<svg id="graph" width="300px" height="300px"> <circle id="myCircle" cx="50" cy="50" r="50" /> <use href="#myCircle" x="200" y="200" /> </svg>
（2）组合
使用 <g> 标签可以将多个图形组合在一起
<svg id="graph" width="300px" height="300px"> <g id="cross"> <line x1="20" y1="20" x2="80" y2="80" stroke="black" /> <line x1="80" y1="20" x2="20" y2="80" stroke="black" /> </g> <use href="#cross" x="200" y="200" /> </svg>
（3）定义
使用 <defs> 标签可以自定义一个图形，这个图形不会被显示，但能被引用
<svg id="graph" width="300px" height="300px"> <defs> <g id="hook"> <line x1="10" y1="50" x2="40" y2="90" stroke="black" /> <line x1="40" y1="90" x2="90" y2="10" stroke="black" /> </g> </defs> <use href="#hook" x="200" y="200" /> </svg>
（4）模式
使用 <pattern> 标签可以自定义一个图形，这个图形不会被显示，但能被引用填充一个区域，常用的属性如下：
x：边界框左上角 X 轴坐标，默认为 0
y：边界框左上角 Y 轴坐标，默认为 0
width ：边界框宽度，默认为 0
height：边界框高度，默认为 0
patternUnits：定义图案效果区域的单位，可选值如下：
- userSpaceOnUse：表示使用当前用户坐标系中的值
- objectBoundingBox：表示引用边界框的分数或百分比的值
<svg id="graph" width="300px" height="300px"> <pattern id="dot" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> <circle cx="10" cy="10" r="5" /> </pattern> <rect x="100" y="100" width="100" height="100" fill="url(#dot)" /> </svg>
（5）图片
使用 <image> 标签可以插入图片，使用 xlink:href 属性指定图片来源
<svg id="graph" width="300px" height="300px"> <image xlink:href="image.jpg" width="50%" height="50%" /> </svg>
（6）动画
使用 <animate> 标签可以产生动画，常用的属性如下：
attributeName：产生动画的属性名称from：属性的初始值to：属性的结束值dur：动画的持续时间repeatCount：动画的循环模式
<svg id="graph" width="300px" height="300px"> <ellipse cx="150" cy="150" rx="100" ry="50"> <animate attributeName="rx" from="100" to="300" dur="2s" repeatCount="indefinite" /> <animate attributeName="ry" from="50" to="300" dur="2s" repeatCount="indefinite" /> </ellipse> </svg>
