Question

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

我在Firefox 4.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>

Answer 1

我一直在使用lib-gwt-svg库来创建一些非常高级的SVG动画和GWT。我建议你尝试将该框架与UI绑定器结合使用。

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

请参阅完整的代码here。

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

1 个答案: