图案变换

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2020 年 1 月⁩ 起,所有主流浏览器均已支持。

patternTransform 属性定义了一系列应用于图案(pattern)图块的变换定义

你可以将此属性与以下 SVG 元素一起使用

示例

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>

元素

你可以在下面部分描述的 SVG 元素中使用此属性。

<pattern>

对于 <pattern>patternTransform 定义了一系列应用于图案图块的变换定义

注意: 从 SVG2 开始,也允许使用 CSS 的 transform 属性。然而,目前的实现状态并不太好。为了向后兼容,强烈建议继续使用 patternTransform 属性。

<transform-list>
默认值 恒等变换
可动画的

变换函数

要了解更多关于变换函数定义的信息,请参阅 transform 属性定义。

规范

规范
Scalable Vector Graphics (SVG) 2
# PatternElementPatternTransformAttribute

浏览器兼容性