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: