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