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>
html, body, svg { height: 100%; }
<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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
from | Chrome ? | Edge ? | Firefox ? | IE No support No | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legend
- No support
- No support
- Compatibility unknown
- Compatibility unknown