The patternTransform attribute describes a list of transform functions that are applied to a pattern.
Syntax:
patternTransform = "values"
Attribute Values: The patternTransform attribute accepts values that are described below:
- Matrix: The transform function moves the object by x and y.
- Scale: The scale transform function specifies a scale operation by x and y.
- Rotate: The rotate transform function specifies a rotation by a degree about a given point.
- SkewX: The skewX transform function specifies a skew transformation along the x-axis by a degree.
- SkewY: The skewY transform function specifies a skew transformation along the y-axis by a degree.
Below examples illustrate the use of patternTransform attribute.
Example 1:
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<svg viewBox="-30 0 1200 1200"
xmlns="http://www.w3.org/2000/svg">
<pattern id="geek" x="0" y="0"
width="200" height="200"
patternUnits="userSpaceOnUse"
patternTransform="rotate(45) scale(0.2 0.2)">
<rect class="checker" fill="green"
x="0" width="100" height="100" y="0">
</rect>
<rect class="checker" fill="green"
x="100" width="80" height="80" y="100">
</rect>
</pattern>
<rect x="0" y="0" width="18%"
height="18%" fill="url(#geek)">
</rect>
</svg>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<svg viewBox="0 0 500 500"
xmlns="http://www.w3.org/2000/svg">
<pattern id="geeksforgeeks" height=".48"
width=".18" fill="green"
patternTransform="rotate(10)skewX(20) scale(2 2.5)">
<circle cx="5" r="5" cy="5" />
</pattern>
<rect width="80" height="80" x="10"
y="10" fill="url(#geeksforgeeks)" />
</svg>
</body>
</html>
Output:
