SVG patternUnits Attribute
The patternUnits attribute specifies that which coordinate system must be used for the geometry properties of the <pattern> element. Only <pattern> element is using this attribute.
Syntax:
patternUnits = userSpaceOnUse | objectBoundingBox
Attribute Values: The patternUnits attribute accepts the values mentioned above and described below:
- userSpaceOnUse: It shows that when the pattern was applied then all coordinates for the geometry properties refer to the user coordinate system.
- objectBoundingBox: It shows that all coordinates for the geometry properties represent percentages or fractions of the bounding box of the element.
Below examples illustrate the use of patternUnits attribute.
Example 1:
HTML
<!DOCTYPE html>
< html >
< body >
< h2 style="color: green;
margin-left: 25px;">
GeeksforGeeks
</ h2 >
< svg viewBox = "0 0 600 100"
< pattern id = "geek1" x = "-5"
fill = "green" y = "8.5" width = "20"
height = "25"
patternUnits = "userSpaceOnUse" >
< circle cx = "10" cy = "10" r = "8" />
</ pattern >
< rect x = "10" y = "0" width = "100"
height = "100" fill = "url(#geek1)" />
</ svg >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!DOCTYPE html>
< html >
< body >
< h2 style="color: green;
margin-left: 25px;">
GeeksforGeeks
</ h2 >
< svg viewBox = "0 0 600 100"
< pattern id = "geek2" x = ".125" y = ".125"
width = ".175" height = ".175"
fill = "green"
patternUnits = "objectBoundingBox" >
< circle cx = "10" cy = "10" r = "8" />
</ pattern >
< rect x = "10" y = "0" width = "100"
height = "100" fill = "url(#geek2)" />
</ svg >
</ body >
</ html >
|
Output:
Last Updated :
31 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...