Chrome SVG：重複使用fill =「freeze」的動畫元素不能按預期工作

我支持我們在應用程序中使用的一些舊的SVG圖形。我在動畫矩形的填充顏色方面遇到了一些問題，並且想知道是否有其他人看過相同的問題。Chrome SVG：重複使用fill =「freeze」的動畫元素不能按預期工作

我們安裝這最終看起來像這樣的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中，顏色完全被破壞。有誰知道這是一個錯誤，還是有解決方法？

謝謝！

來源

2012-06-21 ssawchenko

似乎在Firefox和Opera中都能按預期工作。也許你應該通過https://bugs.webkit.org/在Webkit上提出一個bug –

這個bug也出現在SVG Edit。

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

如果您在相互之間繪製矩形，您會發現它們在完全不透明時看起來似乎是半透明的。我已經看到Chrome Canary沒有出現這種行爲，所以它可能會在下一個版本中得到修復。

我覺得this filed bug是相關的。

來源

2012-06-21 23:12:00 Duopixel

Chrome SVG：重複使用fill =「freeze」的動畫元素不能按預期工作

回答

相關問題