Open In App

SVG by Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

The by attribute specifies a relative offset value for an attribute that will be modified during an animation.

Syntax:

by="numbers"

Attribute Values:

  • integers: Integer at which we want to set the by attribute.

We will use the by attribute for adjusting the size of the shape.

Example 1: 

HTML




<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 100 100" 
        xmlns="http://www.w3.org/2000/svg">
          
        <rect x="5" y="5" width="20" height="20">
            <animate attributeName="width" 
            fill="freeze" by="20" dur="4s" />
        </rect>
    </svg>
</body>
  
</html>


Output:

Example 2: 

HTML




<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 100 100" 
        xmlns="http://www.w3.org/2000/svg">
          
        <rect x="5" y="5" width="20" height="10">
            <animate attributeName="height" 
                fill="freeze" by="10" dur="4s" />
        </rect>
    </svg>
</body>
  
</html>


Output:



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