このJSで作成したSVG <animate>がChromeで動作しないのはなぜですか？

Question

は、この単純なSVG SMILアニメーションを考えてみましょう：

<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上のクロム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

コンソールにはスクリプトエラーはありません。最初の例の内容は実際には2番目の例を読み込んだ後にChrome Developer ToolsからHTMLとしてコピーを選択することで生成されたので、正しい属性名と値を生成していることがわかります。 <animate>要素のnamespaceURIは、すべての属性のnamespaceURI（null）と同じように、両方（SVG名前空間）で同じです。

JSで生成された<animate>要素をChromeで動作させる方法はありますか？

Answer 1

アニメーションを追加する前にの前にという属性を定義すると、動作するように見えます。

http://jsfiddle.net/VFUHk/