使用 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。

使用 CSS（或 JavaScript）代替 SMIL

Use CSS (or JavaScript) instead of SMIL

html

javascript

css

svg

smil