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:
HTML
<!DOCTYPE html> < html >
< body >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< svg viewBox = "-30 0 1200 1200" < 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:
HTML
<!DOCTYPE html> < html >
< body >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< svg viewBox = "0 0 500 500" < 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: