使用CSS（或JavaScript）來代替SMIL

我看到下面的警報在我的鉻控制檯：使用CSS（或JavaScript）來代替SMIL

SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.

所以我想用CSS來代替SMIL。
我可以在CSS中做些什麼，但我不知道如何做到這一點。我的問題是我在SMIL的動畫d屬性，我不知道我可以/我怎麼能在CSS中做到這一點。 這裏是我的代碼：

svg{ 
 
\t position: fixed; 
 
}

<svg width="500" height="500" viewBox="0 0 500 500"> 
 
\t <path id="rect" fill="lightblue" d="M10 10 L30 10 L30 30 L10 30 Z"/> 
 
\t <animate xlink:href="#rect" 
 
\t \t attributeName="d" 
 
\t \t attributeType="XML" 
 
\t \t values="M20 20 L30 20 L40 40 L20 40 Z; 
 
\t \t M10 10 L30 10 L40 30 L10 40 Z; 
 
\t \t M10 10 L30 10 L30 30 L10 30 Z; 
 
\t \t M20 20 L30 20 L40 40 L20 40 Z" 
 
\t \t begin="0s" 
 
\t \t dur="2s" 
 
\t \t repeatCount="indefinite" 
 
\t /> 
 
</svg>

謝謝！

P.S .:如果在CSS中不可能或者在JavaScript中速度更快，那麼JavaScript也不錯。

來源

2015-09-05 Tomato

目前在CSS中不可行。它很難在JavaScript中，因爲你必須實現一個插值引擎。 –

你推薦哪種插值引擎？（我只需要用d屬性做動畫） – Tomato

當我寫*實現*我的意思是你必須自己寫一個。 –

我寫了一些JavaScript來插入路徑之間。這是非常容易使用。你只需要添加腳本到您的網頁，並編寫以下行：

var rect = new bigT('#rect'); 
rect.indefinite(true) 
     .easing("linear") 
     .duration(2000) 
     .setPathKeyframes(
     "M20 20 L30 20 L40 40 L20 40 Z", 
     "M10 10 L30 10 L40 30 L10 40 Z", 
     "M10 10 L30 10 L30 30 L10 30 Z", 
     "M20 20 L30 20 L40 40 L20 40 Z"); 
rect.startAnimation();

你可以在這裏下載bigT.js

而且，這裏是你的SVG預覽：http://jsfiddle.net/r99fkndq/3/

或者，你可以使用像D3.js這樣更廣泛的圖書館

來源

2015-09-05 17:54:47

使用CSS（或JavaScript）來代替SMIL

回答

相關問題