SVG animation not working in Chrome (using animate

问题:

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>

回答1:

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.