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