pattern
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
使用预定义的图形对一个对象进行填充或描边,就要用到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 接口。