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 引用用来填充或描边的图案。

使用上下文

类别容器元素
允许的内容任意数量、任意顺序的下列元素：
动画元素
描述性元素
形状元素
结构化元素
渐变元素
<a>、<clipPath>、<cursor>、<filter>、<font>、<font-face>、<foreignObject>、<image>、<marker>、<mask>、<pattern>、<script>、<style>、<switch>、<text>、<view>

示例

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 接口。