0

SVG を動的に追加すると、特定のブラウザーでアニメーション化されません。問題を追跡するのにしばらく時間がかかりました。これは、問題を説明するために作成できる最も簡単な例です。

私のjsFiddle

window.setTimeout(function() {
    document.getElementById("content").innerHTML = "<svg width='100' height='100'><circle cx='50%' cy='50%' r='50' fill='red'><animateColor id='a1' attributeName='fill' values='blue;green;yellow;orange;red;blue' dur='5s' repeatCount='indefinite' /></circle></svg>";
}, 0);

Chrome および Safari 6.1 Seed では動作しますが、Safari 6.0 またはFirefox では動作しません。

編集: iOS 6 の Safari と同じ問題ですが、iOS 7 Beta の Safari でも動作します。

4

0 に答える 0