SVG patternContentUnits Attribute
Last Updated :
31 Mar, 2022
The patternContentUnits attribute is used to indicate which coordinate system must be used for the contents of the <pattern> element.
Syntax:
patternContentUnits ="userSpaceOnUse"
// Or
patternContentUnits ="objectBoundingBox"
Attribute Values: The patternContentUnits attribute accepts the values mentioned above and described below:
- userSpaceOnUse: It indicates that all coordinates inside the <pattern> element refer to the user coordinate system as defined when the pattern tile was created.
- objectBoundingBox: It indicates that all coordinates inside the <pattern> element are values in fractions or percentages of the bounding box of the <pattern> element.
Note: Default value is userSpaceOnUse.
Example 1: Below is the example that illustrated the use of patternContentUnits attribute using objectBoundingBox value.
HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;
margin-left: 2%;">
GeeksforGeeks
</h1>
<svg viewBox="0 0 300 200"
<pattern id="geek2" width="40%"
height="40%" fill="green"
patternContentUnits="objectBoundingBox">
<ellipse cx=".2" cy=".1" rx=".2" ry=".1" />
</pattern>
<rect width="50" height="50"
fill="url(#geek2)" />
</svg>
</body>
</html>
|
Output: Below is the output generated corresponding to the above code
Example 2: Below is the example that illustrated the use of patternContentUnits attribute using userSpaceOnUse value.
HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<svg viewBox="0 0 200 200"
<pattern id="geek2" width="40%"
height="40%" fill="green"
patternContentUnits="userSpaceOnUse">
<ellipse cx="5" cy="5" rx="2" ry="1" />
</pattern>
<rect width="50" height="50"
fill="url(#geek2)" />
</svg>
</body>
</html>
|
Output: Below is the output generated corresponding to the above code
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...