<pattern>

使用语境

属性

height

此属性确定图案块的高度。值类型：<length>；默认值：0；可动画：是

href

此属性引用一个模板图案，该模板图案为 <pattern> 属性提供默认值。值类型：<URL>；默认值：无；可动画：是

图案内容单位

此属性定义 <pattern> 内容的坐标系统。值类型：userSpaceOnUse | objectBoundingBox；默认值：userSpaceOnUse；可动画：是

注意： 如果在 <pattern> 元素上指定了 viewBox 属性，则此属性无效。

图案变换

此属性包含从图案坐标系统到目标坐标系统的可选附加变换的定义。值类型：<transform-list>；默认值：身份变换；可动画：是

图案单位

此属性定义 x、y、width 和 height 属性的坐标系统。值类型：userSpaceOnUse | objectBoundingBox；默认值：objectBoundingBox；可动画：是

保持长宽比

此属性定义如果 SVG 片段嵌入到具有不同 纵横比 的容器中时，SVG 片段必须如何变形。值类型：(none | xMinYMin | xMidYMin | xMaxYMin | xMinYMid | xMidYMid | xMaxYMid | xMinYMax | xMidYMax | xMaxYMax) (meet | slice)?；默认值：xMidYMid meet；可动画：是

视图框

此属性定义图案片段的 SVG 视口的边界。值类型：<list-of-numbers>；默认值：无；可动画：是

width

此属性确定图案块的宽度。值类型：<length>；默认值：0；可动画：是

x

此属性确定图案块的 x 坐标偏移量。值类型：<length>；默认值：0；可动画：是

xlink:href 已弃用

此属性引用一个模板图案，该模板图案为 <pattern> 属性提供默认值。值类型：<URL>；默认值：无；可动画：是

注意： 对于实现 href 的浏览器，如果同时设置了 href 和 xlink:href，则将忽略 xlink:href，仅使用 href。

y

此属性确定图案块的 y 坐标偏移量。值类型：<length>；默认值：0；可动画：是

DOM 接口

此元素实现了 SVGPatternElement 接口。

示例

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

<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>

规范

浏览器兼容性