Javascript SVG动画在Chrome中不起作用（在GWT中使用animateTransform）

我正在使用GWT和GWTGraphics库为svg路径元素创建动画。 我使用GWTGraphics库来创建路径元素和animateTransform元素（将其附加到路径元素中）来创建旋转动画

我在Firefox4.0中进行了测试，效果很好。然后我在Chrome（17版）和Opera（11.61版）上进行了测试，但什么都没发生。因此，我尝试复制html，因为它是由gwt代码使用Chrome开发工具生成的，并用复制的代码创建了一个简单的html文件。令我惊讶的是，新的html文件在Chrome中工作正常（在Firefox和Opera中也工作正常）。 我的问题是：为什么GWT代码中生成的元素的动画不起作用？通过复制代码创建的html文件中元素的动画是否正常工作

GWT代码：

private void animateTest(Shape shape){
   Element anim = SVGUtil.createSVGElementNS("animateTransform");

   SVGUtil.setAttributeNS(anim, "attributeType", "xml");
   SVGUtil.setAttributeNS(anim, "attributeName", "transform");
   SVGUtil.setAttributeNS(anim, "type", "rotate");
   SVGUtil.setAttributeNS(anim, "from", "360" + " " + CENTER_X + " " + CENTER_Y);
   SVGUtil.setAttributeNS(anim, "to", "0" + " " + CENTER_X + " " + CENTER_Y);
   SVGUtil.setAttributeNS(anim, "dur", "2" + "s");
   SVGUtil.setAttributeNS(anim, "repeatCount", "indefinite");       
   shape.getElement().appendChild(anim);        
   }

生成的html代码：

<svg overflow="hidden" width="300" height="300"><defs></defs>
    <path fill="#cfe2f3" fill-opacity="1.0" stroke="#a4c2f4" stroke-opacity="1.0" stroke-width="1" d=" M150 70 A80,80 0 0,0 70,150 L62 150 A88,88 0 0,1 150,62 L150 70 z">
    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 150 150" to="0 150 150" dur="2s" repeatCount="indefinite"></animateTransform>
    </path>
    </svg>

---

我一直在使用lib-gwt-svg库来制作一些非常高级的带有gwt的svg动画。我建议您尝试将该框架与UI活页夹结合使用

它们具有一些丰富的UIBinder功能，因此您不需要像这里这样动态创建SVG元素，而是可以将原始SVG代码粘贴到yourModule.ui.xml文件中，并在其上使用标准动画函数，如myAnimation.beginElement（）和endElement（）

---

请参阅完整的代码。

我发现了一些与使用javascript进行SVG转换有关的问题。我可以尝试另一个库（比如lib-gwt-svg）或创建本机方法，但如果问题更复杂，我可能找不到解决方法。我也遇到过这个展示，但您是否注意到动画（“SMIL动画”部分）在Chrome上不起作用？（Windows上的版本17）非常好。我制作的精心制作的动画是针对Firefox的，它们在Firefox中工作得很好。我不太清楚为什么这些在Chrome中不起作用。在JS和HTML中进行修补时，beginElement（）方法在我的Chrome中似乎不起作用。这似乎是Chrome中的一个已知错误。在某一点上它说：在webkit中修复：。这是一个孤立的问题吗？我的意思是，这个bug只在某些情况下出现？也许有一个技巧（比如为动画元素指定其他属性）？