patternTransform

SVG 元素
1. A
2. B-C
3. D
  1. <defs>
  2. <desc>
4. E
  1. <ellipse>
5. F
6. G
7. H
  1. <hkern>
8. I
  1. <image>
9. J-L
  1. <line>
  2. <linearGradient>
10. M
11. N-P
12. Q-R
  1. <radialGradient>
  2. <rect>
13. S
  1. <script>
  2. <set>
  3. <stop>
  4. <style>
  5. <svg>
  6. <switch>
  7. <symbol>
14. T
15. U
  1. <use>
16. V-Z
  1. <view>
  2. <vkern>

patternTransform attribute defines a list of transform definitions that are applied to a pattern tile.

You can use this attribute with the following SVG elements:

<pattern>

范例

html,body,svg { height:100% }

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

pattern

For <pattern> , patternTransform defines a list of transform definitions that are applied to a pattern tile.

注意： As of SVG2, it is also allowed to use the CSS transform property. However, the current state of implementation isn't very good. For backward compatibility reason, it is highly suggested to keep using the patternTransform 属性。

值	<transform-list>
默认值	Identity transform
Animatable	Yes

Transform functions

To know more about the definition of transform functions, see the transform attribute definition.

规范

规范	状态	注释
Scalable Vector Graphics (SVG) 2 The definition of 'patternTransform' in that specification.	候选推荐
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'patternTransform' in that specification.	推荐	初始定义

浏览器兼容性

BCD tables only load in the browser

Found a problem with this page?

Edit on GitHub
Source on GitHub
Report a problem with this content on GitHub
Want to fix the problem yourself? See our Contribution guide .

最后修改： Sep 23, 2021 , 由 MDN 贡献者