pattern
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
使用预定义的图形对一个对象进行填充或描边,就要用到pattern
元素。pattern
元素让预定义图形能够以固定间隔在 x 轴和 y 轴上重复(或平铺)从而覆盖要涂色的区域。先使用pattern
元素定义图案,然后在给定的图形元素上用属性 fill
或属性 stroke
引用用来填充或描边的图案。
使用上下文
示例
html
<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
<polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />
</pattern>
</defs>
<circle cx="50" cy="50" r="50" fill="url(#star)" />
<circle
cx="180"
cy="50"
r="40"
fill="none"
stroke-width="20"
stroke="url(#star)" />
</svg>
属性
全局属性
专有属性
DOM 接口
该元素实现了 SVGPatternElement
接口。