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

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

From SVG Specification…

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

你的最终keyTimes值不是1，因此你的动画是无效的。