通过使用 通过使用 <pattern> 标签，可以在 SVG 图像内部定义可重复使用的任意图案。这些图案可以通过 fill 属性或 stroke 属性进行引用。
使用场景
例如我们要在 <svg> 中绘制大量的圆点点，可以通过重复使用 <circle> 标签来实现。
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="2" fill="black" /><circle cx="30" cy="10" r="2" fill="black" /><circle cx="50" cy="10" r="2" fill="black" /><circle cx="70" cy="10" r="2" fill="black" /><circle cx="90" cy="10" r="2" fill="black" /><circle cx="10" cy="30" r="2" fill="black" /><circle cx="30" cy="30" r="2" fill="black" /><circle cx="50" cy="30" r="2" fill="black" /><circle cx="70" cy="30" r="2" fill="black" /><circle cx="90" cy="30" r="2" fill="black" /><circle cx="10" cy="50" r="2" fill="black" /><circle cx="30" cy="50" r="2" fill="black" /><circle cx="50" cy="50" r="2" fill="black" /><circle cx="70" cy="50" r="2" fill="black" /><circle cx="90" cy="50" r="2" fill="black" /><circle cx="10" cy="70" r="2" fill="black" /><circle cx="30" cy="70" r="2" fill="black" /><circle cx="50" cy="70" r="2" fill="black" /><circle cx="70" cy="70" r="2" fill="black" /><circle cx="90" cy="70" r="2" fill="black" /><circle cx="10" cy="90" r="2" fill="black" /><circle cx="30" cy="90" r="2" fill="black" /><circle cx="50" cy="90" r="2" fill="black" /><circle cx="70" cy="90" r="2" fill="black" /><circle cx="90" cy="90" r="2" fill="black" />
</svg>
这种方法不好的地方在于，需要为每个点都创建一个 <circle> 标签，它们除了坐标不一致之外，其它属性都是相同的，大量代码都是冗余的。
这种情况正好就是 <pattern> 标签能够大显身手的地方。
使用方法
使用 <pattern> 标签的基本步骤如下：
- 在
<defs>标签内定义<pattern>。 - 通过元素的
stroke或fill属性引用定义好的图案。
定义 <pattern> 最初看起来可能有些复杂，但实际上它仅仅是绘制一些形状或路径而已。你可以把它想象成一个可从外部重复引用的 <svg> 标签。
<pattern> 可使用的一些属性
- viewBox: 用数值列表指定图案视口边界，默认为
none。 - x: 以长度或百分比指定图案的X坐标，默认为
0。 - width: 指定图案宽度，默认为
0。 - height: 指定图案高度，默认为
0。 - href: 要重用现有图案时，指定
id，默认为none。 - patternContentUnits: 指定图案坐标系统，可选值为
userSpaceOnUse（SVG坐标）或objectBoundingBox（相对于形状），默认为userSpaceOnUse。若设置了viewBox，此属性无效。 - patternTransform: 如需对图案应用变换（如旋转
rotate(45)），在此指定，默认为none。 - patternUnits: 指定
x、y、width、height值所使用的坐标单位，可选userSpaceOnUse或objectBoundingBox，默认为objectBoundingBox。 - preserveAspectRatio: 定义当图案应用于具有不同长宽比的图形时的处理方式，可选值包括
none、xMinYMin、xMidYMin、xMaxYMin、xMinYMid、xMidYMid、xMaxYMid、xMinYMax、xMidYMax、xMaxYMax等，并可附加meet（保持比例填充）或slice（可截断），默认为xMidYMid meet。
我们再以上面的点状图案为例，使用 <pattern> 标签重新实现一次，代码如下：
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="dotPattern" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="2" fill="black" /></pattern></defs><rect width="100" height="100" fill="url(#dotPattern)" />
</svg>
此时代码看起来比上面那一版要简洁多了，尽管坐标计算稍微复杂一些，但这种方式的可读性比上一版要好很多。
案例演示
SVG <pattern> 案例 - 创建可重复使用图案，在线预览
参考资料
Patterns - SVG：可缩放矢量图形 | MDN
<pattern> – SVG: Scalable Vector Graphics | MDN
