SVG-анимация не работает в Chrome (используется animateTransform в GWT)

Question

Я использую GWT и библиотеку GWTGraphics для создания анимации для элемента Path svg. Я использую библиотеку 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.Я предлагаю вам попробовать этот фреймворк в сочетании со связывателем пользовательского интерфейса.

У них есть некоторые богатые возможности UIBinder, так что вам не нужно динамически создавать SVG-элемент, как вы здесь, а вы можете просто вставить rawSVG-код в файл yourModule.ui.xml и использование стандартных функций анимации, таких как myAnimation.beginElement () и endElement () .

См.в комплекте с кодом здесь .