from
SVG Elements
- A
- B-C
- D
- E
- F
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feDistantLight>
<feFlood>
<feFuncA>
<feFuncB>
<feFuncG>
<feFuncR>
<feGaussianBlur>
<feImage>
<feMerge>
<feMergeNode>
<feMorphology>
<feOffset>
<fePointLight>
<feSpecularLighting>
<feSpotLight>
<feTile>
<feTurbulence>
<filter>
<font>
<font-face>
<font-face-format>
<font-face-name>
<font-face-src>
<font-face-uri>
<foreignObject>
- G
- H
- I
- J-L
- M
- N-P
- Q-R
- S
- T
- U
- V-Z
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
.
You can use this attribute with the following SVG elements:
Example
<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