为什么这个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中不起作用？

回答

相关问题