The from
attribute indicates the initial value of the attribute that will be modified during the animation. When used with the to
attribute, the animation will change the modified attribute from the from
value to the to
value. When used with the by
attribute, the animation will change the attribute relatively from the from
value by the value specified in by
.
Four elements are using this attribute: <animate>
, <animateColor>
, <animateMotion>
, and <animateTransform>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" height="100">
<animate attributeName="width" fill="freeze" from="100" to="150" dur="3s"/>
</rect>
</svg>
Usage notes
Value | See below |
---|---|
Default value | None |
Animatable | No |
The exact value type for this attribute depends on the value of the attribute that will be animated.
When a list of values is defined via the values
attribute, the from
attribute is ignored.
Specifications
Specification | Status | Comment |
---|---|---|
SVG Animations Level 2 The definition of 'from' in that specification. |
Editor's Draft | No change |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'from' in that specification. |
Recommendation | Initial definition |
Browser compatibility
BCD tables only load in the browser