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"
                             scale(1 0.5)">
    <circle cx="10" cy="10" r="10" />
  <!-- Apply the transformed pattern tile -->
  <rect x="10" y="10" width="80" height="80"
        fill="url(#p1)" />


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.


Browser compatibilityUpdate compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari
patternTransform ? ? ? ? ? 3
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
patternTransform ? ? ? ? 3 ?

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.