示例
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 |
浏览器兼容性
加载中…