patternTransform

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

Example

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

Note: 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 attribute.

Value	<transform-list>
Default value	Identity transform
Animatable	Yes

Transform functions

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

Specifications

Specification	Status	Comment
Scalable Vector Graphics (SVG) 2 The definition of 'patternTransform' in that specification.	Candidate Recommendation
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'patternTransform' in that specification.	Recommendation	Initial definition

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`patternTransform`	?	?	?	?	?	3	?	?	?	?	3	?

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/patternTransform