Chrome SVG：使用 fill="freeze" 重用动画元素无法按预期工作答案

【问题标题】：Chrome SVG: Reusing animation element with fill="freeze" does not work as expectedChrome SVG：使用 fill="freeze" 重用动画元素无法按预期工作
【发布时间】：2012-06-22 07:12:00
【问题描述】：

我支持我们应用程序中的一些旧 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 中，颜色完全被破坏了。有谁知道这是否是一个错误，或者是否有解决方法？

谢谢！

【问题讨论】：

似乎在 Firefox 和 Opera 中都能正常工作。也许您应该通过bugs.webkit.org 提出 Webkit 的错误

标签： svg

【解决方案1】：

这个错误也出现在SVG Edit。

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

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

我认为this filed bug 是相关的。

【讨论】：