我正在尝试向简单的 SVG SMIL 动画添加计时功能。显然,计时/缓动可以通过以下方式设置keySplines
属性,但是在我的示例中它不起作用:
<svg xmlns="http://www.w3.org/2000/svg" width="214" height="214" viewBox="0 0 24 24">
<rect style="fill:#000;" width="4" height="4" x="3" y="11">
<animateTransform attributeName="transform"
begin="0s" dur="2s" type="translate" from="0 0" to="40 0" repeatCount="4" fill="freeze"
calcMode="spline"
keySplines="0.4, 0, 0.2, 1"/>
</rect>
<rect style="fill:#ff0000;" width="4" height="4" x="3" y="16">
<animateTransform attributeName="transform"
begin="0s" dur="2s" type="translate" from="0 0" to="40 0" repeatCount="4" fill="freeze" />
</rect>
</svg>
这是一个演示:http://jsfiddle.net/q4e4049s/ http://jsfiddle.net/q4e4049s/,黑色的应该有缓动
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 50 14">
<rect fill="black" width="6" height="6" x="3" y="0">
<animateTransform attributeName="transform"
begin="0s"
dur="2s"
type="translate"
from="0 0"
to="40 0"
repeatCount="4"
fill="freeze"
calcMode="spline"
keySplines="0.4 0 0.2 1; 0.4 0 0.2 1"
values="0;30;0"/>
</rect>
<rect fill="red" width="6" height="6" x="3" y="7">
<animateTransform attributeName="transform"
begin="0s"
dur="2s"
type="translate"
from="0 0"
to="40 0"
repeatCount="4"
fill="freeze"/>
</rect>
</svg>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)