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。