为什么这个 JS 创建的 SVG 在 Chrome 中不起作用？

考虑这个简单的 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 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 http://phrogz.net/svg/change-color-on-click-simple-js.svg

控制台中没有脚本错误。第一个示例的内容实际上是通过在加载第二个示例后从 Chrome 开发人员工具中选择“复制为 HTML”来生成的，因此我知道它正在生成正确的属性名称和值。这namespaceURI of the <animate>两者（SVG 命名空间）之间的元素是相同的，namespaceURI所有属性（null).

有没有办法让JS生成<animate>哪些元素可以在 Chrome 中使用？

如果我定义属性before附加动画，它似乎有效。

http://jsfiddle.net/VFUHk/ http://jsfiddle.net/VFUHk/