爲什麼這個JS創建的SVG <animate>在Chrome中不起作用？

考慮一個簡單的SVG的SMIL動畫：爲什麼這個JS創建的SVG <animate>在Chrome中不起作用？

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 100 100"> 
    <circle r="40" fill="red"> 
    <animate 
     attributeType="CSS" begin="click" 
     attributeName="fill" to="blue" dur="0.3s" fill="freeze"/> 
    </circle> 
</svg>

這正常工作在Windows上的Chrome V18（模與保持顏色的錯誤）：
http://phrogz.net/svg/change-color-on-click-simple.svg

當我生成使用JavaScript <animate>元素，所有在Firefox，Safari和Opera中運行良好，但不是Chrome。在Chrome中，當我點擊該圈時沒有任何反應。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 100 100"> 
    <circle r="40" fill="red"/> 
    <script> 
    var c = document.querySelector('circle'); 
    createOn(c,'animate',{ 
     attributeType:'CSS', begin:'click', 
     attributeName:'fill', to:'blue', 
     dur:'0.3s', fill:'freeze' 
    }); 
    function createOn(el,name,attrs){ 
     var e = el.appendChild(document.createElementNS(el.namespaceURI,name)); 
     for (var name in attrs) e.setAttribute(name,attrs[name]); 
     return e; 
    } 
    </script>

看到這個JavaScript版本在這裏：
http://phrogz.net/svg/change-color-on-click-simple-js.svg

有控制檯沒有腳本錯誤。第一個示例的內容實際上是在加載第二個示例後從Chrome開發人員工具中選擇Copy As HTML生成的，因此我知道它正在生成正確的屬性名稱和值。 <animate>元素的namespaceURI在兩個（SVG名稱空間）之間是相同的，所有屬性的namespaceURI（null）也是如此。

有沒有辦法讓JS生成的<animate>元素在Chrome中工作？

來源

2012-04-10 Phrogz

我已經登錄這是一個錯誤的Chromium：http://code.google.com/p/chromium/issues/detail?id=122846 – Phrogz 2012-04-10 20:14:09

如果我在之前定義附加動畫的屬性，它似乎工作。

http://jsfiddle.net/VFUHk/

來源

2012-04-10 19:54:10

哇！很棒的發現。那麼我想這不完全是瘋狂的。 – Phrogz 2012-04-10 20:26:21

爲什麼這個JS創建的SVG <animate>在Chrome中不起作用？

回答

相關問題