SVG動畫無法在Chrome中使用（在GWT中使用animateTransform）

我正在使用GWT和GWTGraphics庫來爲svg Path元素創建動畫。我使用GWTGraphics庫創建路徑元素和animateTransform元素（女巫被追加到路徑元素）來創建旋轉動畫。SVG動畫無法在Chrome中使用（在GWT中使用animateTransform）

我在Firefox 4.0中測試過，它工作正常。然後我在Chrome（版本17）和Opera（11.61）中測試，但沒有任何反應。所以我嘗試複製html，因爲它是使用Chrome開發工具由gwt代碼生成的，並使用複製的代碼創建了一個簡單的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>

來源

2012-03-19 Andrei F

顯示一些代碼！ – Sirko 2012-03-19 13:46:54

我發現了一些關於使用javascript進行SVG轉換的問題。我可以嘗試另一個庫（如lib-gwt-svg）或創建本機方法，但如果問題更復雜，我可能找不到解決方法。 – 2012-03-19 14:54:07

我一直在使用的lib-GWT-SVG庫與GWT一些非常先進的SVG動畫。我建議你嘗試一下與UI綁定相結合的框架。

它們有一些豐富的UIBinder功能，因此您不需要像在這裏一樣動態創建SVG元素，而是可以將原始SVG代碼粘貼到yourModule.ui.xml文件中，並使用標準動畫功能就像myAnimation.beginElement（）和endElement（）。

請參閱代碼here的完整代碼。

來源

2012-03-19 17:54:41

我也遇到過這個展示，但是您是否注意到動畫（「SMIL動畫」部分）在Chrome上不起作用？（Windows上的第17版） – 2012-03-19 21:57:03

極好的一點。我製作的精心製作的動畫以火狐爲目標，他們確實工作得很好。我不太清楚爲什麼這些在Chrome中不起作用。在修改JS和HTML時，似乎beginElement（）方法在Chrome中不適用於我。似乎那是Chrome中的一個已知錯誤。 https://code.google.com/p/chromium/issues/detail?id=13585 – 2012-03-19 22:14:29

有一點說：固定在webkit：https：//bugs.webkit.org/show_bug.cgi？id = 34301。這是一個孤立的問題嗎？我的意思是，這個錯誤只出現在某些情況下？也許有一個技巧（如爲該動畫元素指定其他屬性）？ – 2012-03-19 22:30:54

SVG動畫無法在Chrome中使用（在GWT中使用animateTransform）

回答

相關問題