为什么这个JS创建的SVG< animate>不适用于Chrome？ [英] Why does this JS-created SVG <animate> not work in Chrome?

问题描述

考虑这个简单的SVG SMIL动画：
$ b

Consider this simple 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>

这可以在Windows的Chrome v18上正常运行（取消该颜色的模块错误）：

http://phrogz.net/svg/change-color -on-click-simple.svg

This works correctly in Chrome v18 on Windows (modulo a bug with holding the color):
http://phrogz.net/svg/change-color-on-click-simple.svg

使用< animate> 元素JavaScript，在Firefox，Safari和Opera中都可以正常使用，但不适用于Chrome。在Chrome中，当我点击圈子时没有任何反应。

When I generate the <animate> element using JavaScript, all works well in Firefox, Safari, and Opera, but not Chrome. In Chrome, nothing happens when I click on the circle.

<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版本：

See this JavaScript version here:
http://phrogz.net/svg/change-color-on-click-simple-js.svg

控制台中没有脚本错误。第一个示例的内容实际上是在加载第二个示例后从Chrome开发人员工具中选择Copy As HTML生成的，因此我知道它正在生成正确的属性名称和值。 < animate> 元素的 namespaceURI 在两个（SVG命名空间）中都是相同的， code> namespaceURI 所有属​​性（ null ）。

There are no script errors in the console. The content of the first example was actually generated by choosing Copy As HTML from the Chrome Developer Tools after loading the second example, so I know that it is producing the correct attribute names and values. The namespaceURI of the <animate> element is the same between both (the SVG namespace), as is the namespaceURI of all attributes (null).

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

Is there a way to get JS-generated <animate> elements to work in Chrome?

推荐答案

如果我在之前定义附加动画的属性，它看起来很有用。

If I define the attributes before appending the animation, it appears to work.

http://jsfiddle.net/VFUHk/

这篇关于为什么这个JS创建的SVG< animate>不适用于Chrome？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！