SVG to Attribute
The SVG to attribute indicates the initial value of an attribute. It is used with from attribute.
Syntax:
to = "number"
Attribute Values:
- number: This attribute value holds the number at which we want to set the attribute.
We will use the to attribute for setting the initial value.
Example 1:
HTML
<!DOCTYPE html><html> <body> <svg viewBox="0 0 1000 1000" <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" <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:
Please Login to comment...