SVG动画无法在Chrome中使用（在GWT中使用animateTransform）

我正在使用GWT和GWTGraphics库来为svg Path元素创建动画。我使用GWTGraphics库创建路径元素和animateTransform元素（女巫被追加到路径元素）来创建旋转动画。SVG动画无法在Chrome中使用（在GWT中使用animateTransform）

我在Firefox 4.0中测试过，它工作正常。然后我在Chrome（版本17）和Opera（11.61）中测试，但没有任何反应。所以我尝试复制html，因为它是使用Chrome开发工具由gwt代码生成的，并使用复制的代码创建了一个简单的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>

来源

2012-03-19 Andrei F

显示一些代码！ – Sirko 2012-03-19 13:46:54

我发现了一些关于使用javascript进行SVG转换的问题。我可以尝试另一个库（如lib-gwt-svg）或创建本机方法，但如果问题更复杂，我可能找不到解决方法。 – 2012-03-19 14:54:07

我一直在使用的lib-GWT-SVG库与GWT一些非常先进的SVG动画。我建议你尝试一下与UI绑定相结合的框架。

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

请参阅代码here的完整代码。

来源

2012-03-19 17:54:41

我也遇到过这个展示，但是您是否注意到动画（“SMIL动画”部分）在Chrome上不起作用？（Windows上的第17版） – 2012-03-19 21:57:03

极好的一点。我制作的精心制作的动画以火狐为目标，他们确实工作得很好。我不太清楚为什么这些在Chrome中不起作用。在修改JS和HTML时，似乎beginElement（）方法在Chrome中不适用于我。似乎那是Chrome中的一个已知错误。 https://code.google.com/p/chromium/issues/detail?id=13585 – 2012-03-19 22:14:29

有一点说：固定在webkit：https：//bugs.webkit.org/show_bug.cgi？id = 34301。这是一个孤立的问题吗？我的意思是，这个错误只出现在某些情况下？也许有一个技巧（如为该动画元素指定其他属性）？ – 2012-03-19 22:30:54

SVG动画无法在Chrome中使用（在GWT中使用animateTransform）

回答

相关问题