Question

我正在尝试为简单的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/，黑色应该有缓动

Answer 1

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 50 50">
	<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; 0.4 0 0.2 1"
      values="0;30;0"
    />
	</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>

＆＃13;

SVG SMIL animateTransform缓和

1 个答案: