svg - 有没有另一种方法可以在不使用 SMIL 的情况下制作动画路径或多边形

Question

SMIL is deprecated and not going to work on chrome anymore

我刚开始学习如何制作动画 svg，我偶然发现了这个声明。我不知道这是不是真的(我希望这是错的)。

edit : 不幸的是，这确实是真的。

我现在的问题是:是否有另一种不使用 SMIL 来制作动画路径或多边形的方法？例如，我可以使用非 SMIL 的东西来处理路径的“d”属性吗？

我希望你们中的一些人有答案，我真的很喜欢 svg 在动画方面的可能性。

Answer 1

首先，您应该注意到 SMIL 自 chrome 45 and Opera 32 后才被弃用。 .这意味着控制台中有警告，但这些功能现在仍然有效(2015 年 12 月)。

canIuse状态:

As of Chrome 45 & Opera 32 SMIL is deprecated and usage will result in a warning in the console. Support is expected to be dropped in some future version.

有关此的更多信息，您还可以查看此线程:Intent to deprecate SMIL

---

使用 SMIL 变形 SVG 路径的替代方法是使用 snap.svg这是一个例子:

var s = Snap().attr({viewBox: '0 0 100 150'});

s.path('M50 10 C50 10, 10 50, 50 50 C50 50, 10 10, 50 10z')
 .animate({ d: "M50 10 C90 10, 10 90, 50 90 C90 90, 10 10, 50 10z" }, 2000, mina.elastic);

svg {width: 30%;height: auto;stroke-width: 1;stroke: #000;fill: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>

请注意，您也可以使用 greensock与 morphSVG plugin .