<pattern>

<pattern> 元素定义了一个图形对象，该对象可以以重复的 x 和 y 坐标间隔（“平铺”）重新绘制，以覆盖一个区域。

<pattern> 通过其他图形元素上的 fill 和/或 stroke 属性引用，以使用引用的图案填充或描边这些元素。

示例

html,
body,
svg {
  height: 100%;
}

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>

属性

height: 此属性确定图案平铺的高度。值类型：<length>|<percentage>；默认值：0；可动画：是
href: 此属性引用一个模板图案，该图案为 <pattern> 属性提供默认值。值类型：<URL>；默认值：无；可动画：是
patternContentUnits: 此属性定义了 <pattern> 内容的坐标系。值类型：userSpaceOnUse|objectBoundingBox；默认值：userSpaceOnUse；可动画：是

注意：如果在 <pattern> 元素上指定了 viewBox 属性，则此属性无效。
patternTransform: 此属性包含从图案坐标系到目标坐标系的可选附加转换的定义。值类型：<transform-list>；默认值：无；可动画：是
patternUnits: 此属性定义了属性 x、y、width 和 height 的坐标系。值类型：userSpaceOnUse|objectBoundingBox；默认值：objectBoundingBox；可动画：是
preserveAspectRatio: 此属性定义了如果 SVG 片段嵌入在具有不同纵横比的容器中，SVG 片段必须如何变形。值类型：(none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)?；默认值：xMidYMid meet；可动画：是
viewBox: 此属性定义了图案片段的 SVG 视窗的边界。值类型：<list-of-numbers>；默认值：无；可动画：是
width: 此属性确定图案平铺的宽度。值类型：<length>|<percentage>；默认值：0；可动画：是
x: 此属性确定图案平铺的 x 坐标偏移。值类型：<length>|<percentage>；默认值：0；可动画：是
xlink:href 已弃用: 此属性引用一个模板图案，该图案为 <pattern> 属性提供默认值。值类型：<URL>；默认值：无；可动画：是

注意：对于实现 href 的浏览器，如果同时设置了 href 和 xlink:href，则会忽略 xlink:href，而只使用 href。
y: 此属性确定图案平铺的 y 坐标偏移。值类型：<length>|<percentage>；默认值：0；可动画：是

使用环境

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

规范

规范
可缩放矢量图形 (SVG) 2 # 模式

浏览器兼容性

BCD 表格仅在浏览器中加载