SVG動畫在IE

不工作我不能讓這個動畫在IE工作：SVG動畫在IE

<div style="background: red"> 
    <svg style="padding: 10%" width="80%" xmlns="http://www.w3.org/2000/svg" 
          viewBox="0 0 960 960" enable-background="new 0 0 960 960" id="design-shapes">        
          <path fill="none" stroke="#FFFFFF" stroke-width="40" stroke-linejoin="round" stroke-linecap="round" 
          d="M 0,480 C 0,750, 210,960 480,960 C 750,960, 960,750 960,480 C 960,210 750,0 480,0 C 210,0 0,210 0,480"> 
           <animate dur="9000ms" repeatCount="indefinite" attributeType = "XML" 
           attributeName="d" 
            values="M 0,480 C 0,750, 210,960 480,960 C 750,960, 960,750 960,480 C 960,210 750,0 480,0 C 210,0 0,210 0,480; 
            M 0,480 C 0,750, 210,960 480,960 C 750,960, 960,750 960,480 C 960,210 750,0 480,0 C 210,0 0,210 0,480; 
            M 0,480 C 0,750, 210,960 480,960 C 750,960, 960,750 960,480 C 960,210 750,0 480,0 C 210,0 0,210 0,480; 
            M 480,0 C 480,0 0,840 0,840 C 0,840 480,840 480,840 C 480,840 960,840 960,840 C 960,840 480,0 480,0; 
            M 480,0 C 480,0 0,840 0,840 C 0,840 480,840 480,840 C 480,840 960,840 960,840 C 960,840 480,0 480,0; 
            M 480,0 C 480,0 0,840 0,840 C 0,840 480,840 480,840 C 480,840 960,840 960,840 C 960,840 480,0 480,0; 
            M 0,0, C 0,0 0,960 0,960 C 0,960 960,960 960,960 C 960,960 960,0 960,0 C 960,0 0,0 0,0; 
            M 0,0, C 0,0 0,960 0,960 C 0,960 960,960 960,960 C 960,960 960,0 960,0 C 960,0 0,0 0,0; 
            M 0,0, C 0,0 0,960 0,960 C 0,960 960,960 960,960 C 960,960 960,0 960,0 C 960,0 0,0 0,0; 
            M 0,480 C 0,750, 210,960 480,960 C 750,960, 960,750 960,480 C 960,210 750,0 480,0 C 210,0 0,210 0,480" /></path> 
     </svg> 
</div>

它工作正常在其他地方，我錯過了一些信息？

編輯

已經更新的jsfiddle以包括fakesmile資源，但它仍然無法工作：

https://jsfiddle.net/p3vnqsy9/2/

EDIT 2

已經更新與正確的語法的jsfiddle允許動畫在Firefox中工作：

https://jsfiddle.net/p3vnqsy9/3/

編輯3

我不能讓fakesmil工作在IE等都有，而不是選擇了SVG-睡眠庫。如果有人知道另一種解決方案，請讓我知道...

來源

2015-10-20 Phil Penny

IE does not support SMIL原生。它有一個polyfill它雖然被稱爲fakesmile。

對於它的價值，路徑在動畫中是無效的。逗號只允許分開數字，因此M 0,0, C從0和C之間的逗號無效。這可以防止在Firefox中使用動畫。

來源

2015-10-20 13:05:28

我鏈接到假笑資源在新的jsfiddle，但仍然沒有運氣： https://jsfiddle.net/p3vnqsy9/2/ –

也許是因爲語法錯誤的值屬性，那肯定在Firefox上打破它。 –

哦，你能詳細說明一下嗎？這個動畫元素是爲了移動單個點而設置的，這是一種黑客還是合法的方法？ –

SVG動畫在IE

回答

相關問題