patternTransform

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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:

Examples

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>

Elements

You can use this attribute with the SVG elements described in the sections below.

<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
Scalable Vector Graphics (SVG) 2
# PatternElementPatternTransformAttribute

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
patternTransform

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support