Warum funktioniert dieses von JS erstellte SVG <animate> nicht in Chrome?

Question

Betrachten Sie diese einfache SVG SMIL-Animation:

<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> 

Diese richtig in Chrome v18 unter Windows arbeitet (Fehler Modulo mit der Farbe hält):
http://phrogz.net/svg/change-color-on-click-simple.svg

Wenn ich erzeugen das <animate> Element mit Hilfe von JavaScript, Alles funktioniert gut in Firefox, Safari und Opera, aber nicht in Chrome. In Chrome passiert nichts, wenn ich auf den Kreis klicke.

<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> 

diese JavaScript-Version finden Sie hier:
http://phrogz.net/svg/change-color-on-click-simple-js.svg

Es gibt keine Skriptfehler in der Konsole. Der Inhalt des ersten Beispiels wurde tatsächlich generiert, indem nach dem Laden des zweiten Beispiels Kopieren als HTML aus den Chrome-Entwicklertools ausgewählt wurde. Daher weiß ich, dass die richtigen Attributnamen und -werte erstellt werden. Das namespaceURI des Elements <animate> ist zwischen beiden identisch (der SVG-Namespace), ebenso wie das namespaceURI aller Attribute (null).

Gibt es eine Möglichkeit, JS-generierte <animate> Elemente in Chrome zu verwenden?

Answer 1

Wenn ich die Attribute vor anfüge, scheint die Animation zu funktionieren.

http://jsfiddle.net/VFUHk/