通过使用 <pattern> 标签,可以在 SVG 图像内部定义可重复使用的任意图案。这些图案可以通过 fill 属性或 stroke 属性进行引用。
使用场景
例如我们要在 <svg> 中绘制大量的圆点点,可以通过重复使用 <circle> 标签来实现。

html
<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> 标签重新实现一次,代码如下:
html
<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