Open In App
Related Articles

SVG from Attribute

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The from attribute indicates the initial value of an attribute, it is used with to attribute.

Syntax:

from="number"

Attribute Values:

  • number: number at which we want to set from attribute

We will use the from attribute for setting the initial value.

Example 1:

HTML

<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 1000 1000" 
        xmlns="http://www.w3.org/2000/svg">
          
        <rect x="10" y="10">
            <animate attributeName="width" 
                fill="freeze" from="100" 
                to="150" dur="3s" />
  
            <animate attributeName="height" 
                fill="freeze" from="100" 
                to="150" dur="3s" />
        </rect>
    </svg>
</body>
  
</html>

                    

Output:

Example 2:

HTML

<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 1000 1000" 
        xmlns="http://www.w3.org/2000/svg">
          
        <rect x="10" y="10" fill="green">
            <animate attributeName="width" 
                fill="freeze" from="100" 
                to="150" dur="3s" />
  
            <animate attributeName="height" 
                fill="freeze" from="100" 
                to="150" dur="3s" />
        </rect>
    </svg>
</body>
  
</html>

                    

Output:



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