2

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

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

<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 服务结果的值，我们更改矩形的颜色并尝试为颜色更改设置动画。目前，Chrome 似乎是唯一支持 beginElement 功能的原生 SVG 渲染器。动画在第一次运行时完美运行，但所有后续更新动画的尝试都没有按预期运行。它们似乎总是恢复到第一个动画的填充颜色。

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

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

我可以用 IE9 简单地设置填充，但是，在 Chrome 中颜色完全被破坏了。有谁知道这是否是一个错误，或者是否有解决方法？

谢谢！

4

1 回答 1

1

这个错误也出现在SVG Edit中。

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

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

我认为这个提交的错误是相关的。

于 2012-06-21T23:12:00.830 回答