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.

ThepatternTransform attribute defines a list oftransform definitions that are applied to a pattern tile.

You can use this attribute with the following SVG elements:

<pattern>

Examples

html,body,svg {  height: 100%;}

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">  <!-- Apply a transform on the tile -->  <pattern       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 oftransform definitions that are applied to a pattern tile.

Note:As of SVG2, it is also allowed to use the CSStransform property. However, the current state of implementation isn't very good. For backward compatibility reason, it is highly suggested to keep using thepatternTransform attribute.