Question

在下面的SVG文档中，第一个矩形的不透明度使用calcMode=discrete进行动画处理，并按照我的预期闪烁。第二个矩形应该使用calcMode=linear进行动画处理，但Chrome或Firefox中不会显示任何动画。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 400 500">
    <rect width="300" height="100" transform="translate(50,50)" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)">
       <animate attributeName="opacity" attributeType="XML" dur="1.2s" values="0.1; 1.0; 0.1" keyTimes="0; 0.33; 0.67" calcMode="discrete" repeatCount="indefinite" />
    </rect>
   <rect width="300" height="100" transform="translate(50,250)" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)">
       <animate attributeName="opacity" attributeType="XML" dur="1.2s" values="0.1; 1.0; 0.1" keyTimes="0; 0.33; 0.67" calcMode="linear" repeatCount="indefinite" />
   </rect>
</svg>

http://jsfiddle.net/aJUnZ/

我的动画是否未正确定义，SVG是否支持此功能，还是浏览器尚未实现？

Answer 1

来自SVG Specification ...

对于线性和样条动画，列表中的第一个时间值必须为0，列表中的最后一个时间值必须为1.与每个值关联的关键时间定义何时设置该值;值在关键时间之间插值。

您的最终keyTimes值不是1，因此您的动画无效。将其更改为1，它将起作用。

样条动画是否适用于svg不透明度，如果是，如何？

1 个答案: