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" 
        xmlns="http://www.w3.org/2000/svg">
        
        <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" 
        xmlns="http://www.w3.org/2000/svg">
        
        <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

Comment

Explore