patternTransform

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

Only one element is using this attribute: <pattern>

<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

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
patternTransformChrome ? Edge ? Firefox ? IE ? Opera ? Safari Full support 3WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS Full support 3Samsung Internet Android ?

Legend

Full support
Full support
Compatibility unknown
Compatibility unknown