Question

我支持我们在应用程序中使用的一些旧的SVG图形。我在制作矩形填充颜色的动画时遇到了一些问题，我想知道是否有其他人看到了同样的问题。

我们在rec上设置了一个animate元素，最终看起来像这样：

<svg id="svgEle" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect id="rect"
  width="100" height="100" 
  style="fill:#008000; stroke:#000000;">
    <animate id="animate" fill="freeze" 
      attributeName="fill" attributeType="CSS" 
      begin="indefinite" dur="1s"></animate>
  </rect>      
</svg>

然后，根据Web服务结果的值，我们更改rect的颜色并尝试设置颜色更改的动画。目前，Chrome似乎是唯一支持beginElement功能的原生SVG渲染。动画在第一次运行时工作正常，但所有后续更新动画的尝试都不会按预期运行。它们似乎总是恢复到第一个动画的填充颜色。

我创建了以下示例以显示我的意思：http://jsfiddle.net/ssawchenko/ARXbs/

在Chrome中，当您单击按钮时，矩形应该通过动画循环显示所有4种颜色，但事实并非如此。在IE9中不支持动画，因此填充颜色只是直接更改。

我很好用IE9只是设置填充，但是，在Chrome中颜色完全被破坏。有谁知道这是一个错误，还是有解决方法？

谢谢！

Answer 1

此错误也出现在SVG Edit。

<animate attributeName="opacity" begin="indefinite" dur="1" fill="freeze">
</animate>

如果你在彼此的顶部绘制矩形，当它们完全不透明时，它们会看到它们看起来是半透明的。我已经看到Chrome Canary没有出现这种行为，因此可能会在下一个版本中修复。

我认为this filed bug是相关的。

Chrome SVG：使用fill =“freeze”重用动画元素不能按预期工作

1 个答案: