SVGPatternElement: patternTransform 属性

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

SVGPatternElement 接口的只读属性 patternTransform 反映了给定 <pattern> 元素的 patternTransform 属性。此属性保存应用于图案本身的变换，允许进行 translate、rotate、scale 和 skew 等操作。

值

一个 SVGAnimatedTransformList 对象。

示例

在此示例中，图案在 X 轴上旋转 20 度，倾斜 30 度，并且在水平方向上缩放因子为 1，在垂直方向上缩放因子为 0.5。

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Apply a transform on the tile -->
  <pattern
    id="p1"
    width=".25"
    height=".25"
    patternTransform="rotate(20)
                      skewX(30)
                      scale(1 0.5)">
    <circle cx="10" cy="10" r="10" />
  </pattern>

  <!-- Apply the transformed pattern tile -->
  <rect x="10" y="10" width="80" height="80" fill="url(#p1)" />
</svg>

规范

规范
Scalable Vector Graphics (SVG) 2 # __svg__SVGPatternElement__patternTransform

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 2024年12月30日，由 MDN 贡献者编辑。

在 GitHub 上查看此页面 • 报告此内容的问题