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:
<!DOCTYPE html>
<html>
<body>
<h2 style="color: green;
margin-left: 25px;">
GeeksforGeeks
</h2>
<svg viewBox="0 0 600 100"
xmlns="http://www.w3.org/2000/svg">
<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:
<!DOCTYPE html>
<html>
<body>
<h2 style="color: green;
margin-left: 25px;">
GeeksforGeeks
</h2>
<svg viewBox="0 0 600 100"
xmlns="http://www.w3.org/2000/svg">
<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:
