如何将一个SVG转换为另一个SVG？

Question

我找了大约一个小时才求助于此；我找到了https://css-tricks.com/svg-shape-morphing-works/。本教程说“创建两个具有相同点数的svg”，然后随机跳到：

<svg viewBox="0 0 194.6 185.1">

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

  </polygon>

</svg>

在创建后，没有对这两个SVG图像的引用。本教程并没有解释到底发生了什么。或者如何处理我创建的图像-我假设这些“点”是某种坐标系统，绘制出图像，viewbox属性的值似乎是随机的-。

我看过其他的解决方案，比如GreenSocks ect变形工具，但是对于将两个40px的图像变形在一起的任务，它似乎太复杂了，必须学习所有的语法等。

(这两个图像位于：

http://tobi.freetzi.com/arr.svg和

http://tobi.freetzi.com/add.svg )

Answer 1

要在其间变形的两条路径必须具有相同数量和类型的路径命令。路径命令是出现在路径定义d=""中的单个字母。您可以在the SVG spec中阅读有关它们的更多信息。

在您的第一个SVG (arr.svg)中有X个命令：

arr.svg           add.svg
--------------    --------------
M12.222,13.293    M29.000,22.000
L7.000,13.000     L22.000,22.000
L17.172,23.899    L22.000,29.000
L17.172,23.899    L18.000,33.000
L20.000,26.728    L18.000,22.000
L20.000,26.728    L7.000,22.000
L20.000,26.728    L10.000,18.000
L22.828,23.899    L18.000,18.000
L22.828,23.899    L18.000,10.000
L33.000,13.000    L22.000,7.000
L27.778,13.293    L22.000,18.000
L20.000,21.071    L32.000,18.000
L14.343,15.414    L29.000,22.000
                  Z

你的两个SVG几乎匹配。如果你添加一个'Z‘到第一个，你应该能够动画他们。

​

<svg viewBox="0 0 121.5 60.834">
  
  <path d="">
    <animate attributeName="d" dur="2s" repeatCount="indefinite"
      keyTimes="0;0.5;1"
      values="M12.222,13.293 L7.000,13.000 L17.172,23.899 L17.172,23.899 L20.000,26.728 L20.000,26.728 L20.000,26.728 L22.828,23.899 L22.828,23.899 L33.000,13.000 L27.778,13.293 L20.000,21.071 L14.343,15.414 Z;
              M29.000,22.000 L22.000,22.000 L22.000,29.000 L18.000,33.000 L18.000,22.000 L7.000,22.000 L10.000,18.000 L18.000,18.000 L18.000,10.000 L22.000,7.000 L22.000,18.000 L32.000,18.000 L29.000,22.000 Z;
              M12.222,13.293 L7.000,13.000 L17.172,23.899 L17.172,23.899 L20.000,26.728 L20.000,26.728 L20.000,26.728 L22.828,23.899 L22.828,23.899 L33.000,13.000 L27.778,13.293 L20.000,21.071 L14.343,15.414 Z"/>
  </path>
  
</svg>

​