SVG形状变形的工作原理

虽然使用CSS为SVG动画很容易，但CSS不能为所有可以动画的SVG属性设置动画。 例如，所有定义元素实际形状的属性都无法在CSS中更改或设置动画。 不过，您可以通过SMIL为它们设置动画。 Sara Soueidan在她CSS-Tricks上的SMIL指南中对此进行了介绍，但是我认为我会对这种特殊功能有所了解。

更新：这篇文章全部关于使用SMIL进行SVG形状变形。 SMIL的前景不确定（可能不好）。 如果您对形状变形超级感兴趣（应该是，它真棒！），我建议您查看GreenSock的MorphSVG插件 ，它不需要SMIL，而且功能更强大，因为它可以在形状之间变形，而不考虑点数，元素类型和跨浏览器。

另一个更新： Chrome已经开始允许通过CSS进行形状变形。 这是一支演示笔 。 但是，它甚至比SMIL更受限制，因为它仅限于一个浏览器，并且需要具有相同点数的路径。 像所有SVG一样，也没有硬件加速。

最重要的事实：形状需要具有相同数量的点

否则，动画将失败。 形状不会消失或其他任何东西，但不会动画。

仅通过查看d （对于path ）或points属性（对于多边形），形状就具有多少个点并不是很明显，因此您可能只需要从一个矢量编辑器程序开始从那里塑造和工作。

1.从最复杂的形状开始

在这个演示中，我将从星形转换为支票。 星星比较复杂：

保存该SVG的副本，然后为下一个形状制作一个新副本。

2.使用相同的点制作下一个形状。

拖曳这些点，直到获得下一个形状。

3.在SVG形状元素本身上使用起始形状

<svg viewBox="0 0 194.6 185.1">

  <polygon fill="#FFD41D" points=" ... shape 1 points ... ">

  </polygon>

</svg>

4.添加动画元素到下一个形状

<svg viewBox="0 0 194.6 185.1">

  <polygon fill="#FFD41D" points=" ... shape 1 points ... ">

    <animate attributeName="points" dur="500ms" to=" ... shape 2 points ... " />

  </polygon>

</svg>

该动画将立即运行，因此我们需要对其进行一些修复。

5.根据需要触发动画

只要所有事件都在SVG本身内发生，SMIL就能处理诸如单击和悬停之类的交互。 例如，您可以在单击动画时开始动画，例如：

<polygon id="shape" points=" ... shape 1 points ... ">

  <animate begin="shape.click" attributeName="points" dur="500ms" to=" ... shape 2 points ... />

</polygon>

这很整洁，但有一点限制，因为您只能处理同一SVG中其他元素的点击。 也许此SVG只是<button>的一部分，并且您想在单击该按钮时运行动画。

首先给动画指定一个ID，以便我们可以使用JavaScript找到它，然后阻止它与以下代码一起运行：

<animate id="animation-to-check" begin="indefinite" ... />

现在，您可以获取对该动画的引用，并根据自己的喜好开始播放：

animationToCheck = document.getElementById("animation-to-check");

// run this on a click or whenever you want
animationToCheck.beginElement();

演示版

该演示实际上有四个动画。 一个将星星变形为一个格子，一个改变颜色，然后将两个相同的动画反向显示。 单击按钮检查按钮的状态，然后运行适当的按钮。

见笔形键变身克里斯Coyier（ @chriscoyier上） CodePen 。

对于图表而言，这将非常酷，例如这个旧的Raphael演示 ：

翻译自: https://css-tricks.com/svg-shape-morphing-works/