javascript - 使用 CSS(或 JavaScript)代替 SMIL

Question

我在 Chrome 控制台中看到以下警告:

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{
	position: fixed;
}

<svg width="500" height="500" viewBox="0 0 500 500">
	<path id="rect" fill="lightblue" d="M10 10 L30 10 L30 30 L10 30 Z"/>
	<animate xlink:href="#rect"
		attributeName="d"
		attributeType="XML"
		values="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"
		begin="0s"
		dur="2s" 
		repeatCount="indefinite"
	/>
</svg>

谢谢!

P.S.:如果在 CSS 中不可能或在 JavaScript 中更快，JavaScript 也不错。

Answer 1

我写了一些 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。