SVG動畫無法在Chrome中工作

此動畫在Firefox中完美工作...但不適用於Chrome。多邊形不生成動畫？ JSFiddle SVG動畫無法在Chrome中工作

<polygon fill="url(#grad1)" points="503,275 529,275 529,275 503,275"> 
    <animate attributeName="points" 
     calcMode="linear" 
     begin="1s" dur="0.4s" 
     from="503,275 529,275 529,275 503,275" 
     to="503,275 529,275 843,335 789,335" 
     fill="freeze"/>

任何想法？

來源

2013-03-08 morphsd

Similar questions：http://stackoverflow.com/questions/11916796/chrome-bug-with-svg-polygon-animation和http://stackoverflow.com/questions/13530894/chrome-svg-animate-tag。 – 2013-03-19 15:18:33

Chrome（版本25.0.1364.152）完全不支持svg。

Firefox也不支持某些svg功能。例如animateTransform標籤，它是一個SVG標籤的直接孩子Firefox和chrome不動畫SVG，雖然W3文件說，應該動畫SVG，

因此，這將是更好的測試SVG在opera，

來源

2013-03-09 19:42:24

animateTransform標籤是svg標籤的直接子標籤，應該在Firefox中生成動畫。如果你有一個非工作的測試用例，請在https://bugzilla.mozilla.org/ – 2013-03-09 20:48:48

確定一個bug，所以動畫svg元素的animateTransform不是SVG 1.1（當前標準）的一部分。建議將它添加到SVG 2中，但目前這仍然是一項工作。 – 2013-03-09 21:50:12

@RobertLongson，對不起！但是我沒有在http://www.w3.org/TR/SVG/struct.html#SVGElement中發現任何書面文檔，說明animateTransform動畫svg元素不是SVG 1.1的一部分。以任意順序包含任意數量的以下元素：animateTransform存在於元素列表中，我在Opera中進行了測試，支持此動畫。這是什麼意思？歌劇實施錯誤的svg？ Plz回覆... – 2013-03-10 03:50:23

好的，讓我再試一次 - 沒有發現你只看着Polygon。它看起來像動畫不能直接在Chrome中的多邊形上工作，但通過在形狀上放置濾鏡併爲濾鏡區域設置動畫效果，您可以獲得相同的效果。這是有點哈克，但它讓你想要的地方：

<filter id="animateClip" x="0%" y="0%" width="100%" height="0%"> 
     <animate attributeName="height" 
     attributeType="XML" 
     calcMode="linear" 
     dur="1s" 
     from="0%" 
     to="100%" 
     fill="freeze"/> 
     <feColorMatrix type="identity"/> 
    </filter>

顏色矩陣只是爲了給出一個過濾結果。 Chrome不喜歡空過濾器。

來源

2013-03-09 20:25:46

不，它不工作... – morphsd 2013-03-14 20:18:50

SVG動畫無法在Chrome中工作

回答

相關問題