</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
</svg>
上面代码中，
<pattern>标签将一个圆形定义为dots模式。
patternUnits="userSpaceOnUse"表示
<pattern>的宽度和长度是实际的像素值。然后，指定这个模式去填充下面的矩形。14.
<image>标签
<image>标签用于插入图片文件。
<svg viewBox="0 0 100 100" width="100" height="100">
<image xlink:href="path/to/image.jpg"
width="50%" height="50%"/>
</svg>上面代码中，
<image>的
xlink:href属性表示图像的来源。15.
<animate>标签
<animate>标签用于产生动画效果。
<svg width="500px" height="500px">
<rect x="0" y="0" width="100" height="100" fill="#feac5e">
<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
</rect>
</svg>上面代码中，矩形会不断移动，产生动画效果。
<animate>的属性含义如下。attributeName：发生动画效果的属性名。
from：单次动画的初始值。
to：单次动画的结束值。
dur：单次动画的持续时间。
repeatCount：动画的循环模式。
可以在多个属性上面定义动画。
<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
<animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" />16.
<animateTransform>标签
<animate>标签对 CSS 的transform属性不起作用，如果需要变形，就要使用<animateTransform>标签。
<svg width="500px" height="500px">
<rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
<animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="indefinite" />
