通过使用 <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> 案例 - 创建可重复使用图案,在线预览