Question

我环顾四周只能诉诸SO;我找到了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图像的引用。本教程没有解释发生了什么...或者如何处理我创建的图像 - 我假设这些“点”是某种协调系统，用于绘制图像，以及视图框的值属性似乎是随机的 - 。

我查看了其他解决方案，例如GreenSocks svgmorphing工具，但是为了将两个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几乎匹配。如果你添加一个＆＃39; Z＆＃39;对于第一个，你应该能够为它们制作动画。

＆＃13;

<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>

＆＃13;

如何将一个SVG变形为另一个？

1 个答案: