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
Share your thoughts in the comments
Please Login to comment...