Open In App

SVG patternUnits Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

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" 
        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:

HTML




<!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:



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads