SVG 애니메이션이 Chrome에서 작동하지 않습니다 (GWT에서 animateTransform 사용).

Question

저는 GWT 및 GWTGraphics 라이브러리를 사용하여 svg Path 요소에 대한 애니메이션을 만듭니다. GWTGraphics 라이브러리를 사용하여 경로 요소를 만들고 animateTransform 요소 (마녀가 경로 요소에 추가됨)를 사용하여 회전 애니메이션을 만듭니다.

Firefox 4.0에서 테스트했는데 정상적으로 작동합니다. 그런 다음 Chrome (버전 17) 및 Opera (11.61)에서 테스트했지만 아무런 변화가 없습니다. 그래서 크롬 개발 도구를 사용하여 gwt 코드에 의해 생성 된 html 복사를 시도하고 복사 된 코드가있는 간단한 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

내가 GWT와 매우 고급 SVG 애니메이션의 LIB-GWT-SVG 라이브러리를 사용하고있다. UI 바인더와 결합 된 프레임 워크를 사용해 보시기 바랍니다.

그들은 풍부한 UIBinder 기능을 가지고 있으므로 여기있는 것처럼 SVG 요소를 동적으로 만들 필요가 없으며 원시 SVG 코드를 yourModule.ui.xml 파일에 붙여 넣을 수 있습니다. myAnimation.beginElement() 및 endElement()과 같은 표준 애니메이션 기능이 있습니다.

코드 here을 참조하십시오.