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: