to - SVG: Scalable Vector Graphics 编辑
The to
attribute indicates the final value of the attribute that will be modified during the animation. The value of the attribute will change between the from
attribute value and this value.
Five elements are using this attribute: <animate>
, <animateColor>
, <animateMotion>
, <animateTransform>
, and <set>
html, body, svg {
height: 100%;
}
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="100">
<animate attributeType="XML" attributeName="width" fill="freeze"
from="100" to="150" dur="3s"/>
</rect>
</svg>
animate, animateColor, animateMotion, animateTransform
For <animate>
, <animateColor>
, <animateMotion>
, and <animateTransform>
, to
specifies the ending value of the animation.
Value | <value> |
---|---|
Default value | None |
Animatable | No |
The exact value type for this attribute depend on the value of the attribute that will be animated.
If a list of values is defined via the values
attribute, the to
attribute is ignored.
set
For the <set>
element, to
specifies the value for the attribute during the duration of the element.
Value | <value> |
---|---|
Default value | None |
Animatable | No |
The exact value type for this attribute depend on the value of the attribute that will be animated.
Specifications
Specification | Status | Comment |
---|---|---|
SVG Animations Level 2 The definition of 'to for <set>' in that specification. | Editor's Draft | No change |
SVG Animations Level 2 The definition of 'to for <animate>, <animateColor>, <animateMotion>, and <animateTransform>' in that specification. | Editor's Draft | No change |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'to for <set>' in that specification. | Recommendation | Initial definition for <set> |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'to for <animate>, <animateColor>, <animateMotion>, and <animateTransform>' in that specification. | Recommendation | Initial definition for <animate> , <animateColor> , <animateMotion> , and <animateTransform> |
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论