为什么这个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上的Chrome v18中正常工作(以模拟颜色的模块为模):http:
//phrogz.net/svg/change-color-on-click-simple.svg

当我<animate>使用JavaScript 生成元素时,一切都适用于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开发者工具中选择"复制为HTML"生成的,因此我知道它正在生成正确的属性名称和值.在namespaceURI所述的<animate>元件是两个(在SVG命名空间)之间的相同,因为是namespaceURI所有属性(null).

有没有办法让JS生成的<animate>元素在Chrome中运行？

Answer 1

如果我在附加动画之前定义属性,它似乎工作.

http://jsfiddle.net/VFUHk/