SVG动画在Chrome中不工作（GWT中使用animateTransform） [英] SVG animation not working in Chrome (using animateTransform in GWT)

问题描述

我使用GWT和GWTGraphics库创建一个SVG Path元素的动画。
我用的是GWTGraphics库创建路径元素，将AnimateTransform元素（女巫被附加到路径元素）来创建一个旋转动画。

我在Firefox 4.0测试，它工作正常。然后，我在Chrome（版本17）和Opera（11.61）进行测试，但没有任何反应。所以我试图复制HTML，因为它是由使用Chrome开发工具的GWT code产生，创造与复制code一个简单的HTML文件。令我惊讶的是，新的HTML文件的工作只是因为它应该在Chrome（并且还曾在Firefox和Opera）。
我的问题是：为什么对于C不工作在GWT $ C $生成的元素的动画？并为通过复制code创建的HTML文件中的元素动画工作？

GWT code：

 私人无效animateTest（形状的形状）{
   元件阿尼姆= SVGUtil.createSVGElementNS（animateTransform）;   SVGUtil.setAttributeNS（动画，属性类型，XML）;
   SVGUtil.setAttributeNS（动画的attributeName」，改造）;
   SVGUtil.setAttributeNS（动画，型，旋转）;
   SVGUtil.setAttributeNS（动画，从，360++ CENTER_X ++ CENTER_Y）;
   SVGUtil.setAttributeNS（动画，到，0++ CENTER_X ++ CENTER_Y）;
   SVGUtil.setAttributeNS（动画DUR，2+的）;
   SVGUtil.setAttributeNS（动画的repeatCount，无限期）;
   。shape.getElement（）的appendChild（阿尼姆）;
   }
 

生成的HTML code：

 <$ C C>＆LT，溢SVG =隐藏WIDTH =300HEIGHT =300」＆GT;＆LT，DEFS＆GT;＆LT / DEFS＆GT;
    ＆LT;路径填充=＃cfe2f3填充不透明度=1.0行程=＃a4c2f4中风不透明度=1.0笔画宽度=1D =70 M150 0 A80,80 0,0 70150 L62 150 A88,88 0 0,1 150,62 L150 70 Z＆GT;
    ＆LT; animateTransform属性类型=XML的attributeName =改造类型=旋转从=360 150 150到=0 150 150DUR =2秒的repeatCount =无限期＆GT;＆LT; / animateTransform＆GT;
    ＆LT; /路径＆GT;
    ＆LT; / SVG＆GT;
 

解决方案

我一直在使用的lib-GWT-SVG库使用GWT一些非常先进的SVG动画。我建议你​​试试这个框架内与UI粘合剂结合。

他们有一些丰富的UiBinder的能力，使您不必动态创建SVG元素就像你在这里，而你可以粘贴原始SVG code到yourModule.ui.xml文件和使用标准的动画功能，它喜欢的 myAnimation.beginElement（）的和的的endElement（）的

请参阅与code的这里。

i'm using GWT and the GWTGraphics library to to create an animation for a svg Path element. I use the GWTGraphics library to create the path element and the animateTransform element (witch is appended to the path element) to create a rotation animation.

I tested in Firefox 4.0 and it works fine. I then tested in Chrome (ver. 17) and Opera(11.61) but nothing happens. So I tried copying the html, as it was generated by the gwt code using the Chrome development tools, and created a simple html file with the copied code. To my surprise, the new html file worked just as it should in Chrome (and also worked in Firefox and Opera). My question is: why is the animation for the elements generated in GWT code not working ? And the animation for the elements in the html file created by copying the code is working?

GWT code:

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);        
   }

Generated html code:

<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>

解决方案

I have been using the lib-gwt-svg library for some very advanced SVG animations with GWT. I suggest you try that framework combined with the UI binder.

They have some rich UIBinder abilities so that you don't need to dynamically create the SVG element like you are here, but rather you can just paste the raw SVG code into a yourModule.ui.xml file and the use the standard animation functions on it like myAnimation.beginElement() and endElement().

See the complete with code here.

这篇关于SVG动画在Chrome中不工作（GWT中使用animateTransform）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！