使用 <animate> SVG 或 CSS 过渡变形 SVG答案

【问题标题】：Morph SVG with <animate> SVG or CSS transition使用 <animate> SVG 或 CSS 过渡变形 SVG
【发布时间】：2021-10-26 21:05:52
【问题描述】：

我正在努力制作动画作品。我在 Illustrator 中创建了两个具有相同路径点数的 SVG 形状。现在我想编写一个变形动画。我的第一次尝试是按照here 的建议制作动画对象：

<span class="svgspan">
              <svg class="svg1" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 398 369.4"
                style="enable-background:new 0 0 398 369.4;" xml:space="preserve">
                <style type="text/css">
                  .st0 {
                    fill: #FFFFFF;
                  }
                </style>
                <path id="pfad" class="st0" d="M398 184.7c0 51-20.7 97.2-54.1 130.6s-79.6 54.1-130.6 54.1s-97.2-20.7-130.6-54.1s-54.1-79.6-54.1-130.6
                        S49.3 87.5 82.7 54.1S162.3 0 213.3 0s97.2 20.7 130.6 54.1S398 133.7 398 184.7z">
                <animate id="trs" begin="500ms" fill="freeze" attributename="d" dur="2s" from ="M398,184.7c0,51-20.7,97.2-54.1,130.6s-79.6,54.1-130.6,54.1s-97.2-20.7-130.6-54.1s-54.1-79.6-54.1-130.6
                S49.3 87.5 82.7 54.1S162.3 0 213.3 0s97.2 20.7 130.6 54.1S398 133.7 398 184.7z" to="M195 369.4c-48.4-78-140.4-118.3-182.3-200.3C-3.8 131.7-6.1 85 17.2 50C57.9-16 157.7-15.8 199.1 49.4
                        c32.3-51.6 107.8-65.7 155.7-27.5c54.5 39.2 53.8 119.8 15.8 170.4c-49 65.4-124.1 107-167.6 177.1H195z"></path>
              </svg></span>

我得到了一个动画，但它没有变形而是立即切换到第二条路径。

我的下一个方法是css animation，如下所示：

#pfad {
  d: path('M195,369.4c-48.4-78-140.4-118.3-182.3-200.3C-3.8,131.7-6.1,85,17.2,50C57.9-16,157.7-15.8,199.1,49.4c32.3-51.6,107.8-65.7,155.7-27.5c54.5,39.2,53.8,119.8,15.8,170.4c-49,65.4-124.1,107-167.6,177.1H195z');
  transition: 1s;
}

这也不起作用。我什至在 VS Code 和 Chrome 中遇到“未知属性：d”错误：

如果有人可以帮助我完成这项工作，那就太好了。

编辑：我猜锚点现在在正确的位置，但我仍然有同样的问题。新的锚点：

<path id="pfad" class="st0" d="M199,369.4c-57.6-0.5-110.6-27.4-144.1-69.2c-25.4-31.6-40.6-71.8-40.6-115.5C14.3,82.7,97,0,199,0
                s184.7,82.7,184.7,184.7c0,33.7-9,65.3-24.8,92.5C326.9,332.3,267.3,369.4,199,369.4C198.4,369.4,199.6,369.4,199,369.4z">
                <animate id="trs" begin="500ms" fill="freeze" attributename="d" dur="2s" from ="M199,369.4c-57.6-0.5-110.6-27.4-144.1-69.2c-25.4-31.6-40.6-71.8-40.6-115.5C14.3,82.7,97,0,199,0
                s184.7,82.7,184.7,184.7c0,33.7-9,65.3-24.8,92.5C326.9,332.3,267.3,369.4,199,369.4C198.4,369.4,199.6,369.4,199,369.4z" to="M199,369.4C150.6,291.4,54.8,251,12.9,169C-3.6,131.6-5.9,84.9,17.4,49.9c40.7-66,140.5-65.8,181.9-0.6
                C231.6-2.3,307.1-16.4,355,21.8c54.5,39.2,53.8,119.8,15.8,170.4C321.8,257.6,242.5,299.3,199,369.4L199,369.4z"></path>```

【问题讨论】：

还有你用的是哪个浏览器，跨浏览器支持不是通用的。
是的，它们的点数相同。至少当我从 illustrator 导出它时。我使用 Chrome 版本 92.0.4515.159
路径命令与动画命令不同。例如。 animate 结束 cccz 但路径结束 SSSz。它们必须是相同的字母才能流畅地制作动画。
@RobertLongson 好的，谢谢。有什么方法可以实现这一目标？在 illustrator 中让一个路径点在两种形状的相同坐标处就足够了吗？我认为只是编辑字母会导致不同的形状。
不知道，我从没用过illustrator。如果我这样做，我可能会手动或通过 Inkscape 创建路径。

标签： html css svg css-transitions svg-animate

【解决方案1】：

就像 cmets 建议的那样，精确地确定路径中的点是个好主意。所以，你的代码没问题。这只是需要帮助的道路。

我复制了你到 Inkscape 的路径并在那里制作了两个形状。

path {
  fill: red;
}

<span class="svgspan">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="200" height="200">
    <path id="pfad" class="st0"
      d="M 500,1000 C 220,1000 0,780 0,500 0,220 220,0 500,0 c 280,0 500,220 500,500 0,280 -220,500 -500,500 z">
      <animate id="trs" begin="1s" fill="freeze" attributename="d" dur="2s"
       from ="M 500,1000 C 220,1000 0,780 0,500 0,220 220,0 500,0 c 280,0 500,220 500,500 0,280 -220,500 -500,500 z"
       to="M 500,1000 C 420,820 0,600 0,300 0,0 380,-120 500,150 620,-120 1000,0 1000,300 c 0,300 -420,520 -500,700 z" />
    </path>
  </svg>
</span>

【讨论】：

【解决方案2】：

实现平滑动画路径变化的主要条件
使用属性d 是：

两种形状的节点数量相等
节点类型（A；C；Q）的精确匹配，分别针对路径初始和最终位置的每个点可以通过不同的方式满足这些条件，但最好在矢量编辑器中执行此操作。

心和圆的节点数必须相同

以下是 Inkscape 的屏幕截图。将匹配点从心形的轮廓拖到圆形的轮廓上

@chrwahl 在解决这个问题时，他在回答中做了这项工作
感谢@chrwahl 的出色表现

@jayjay9601 comments

我肯定会尝试，即使我更喜欢 html/css-only 版本

下面是使用d属性的完整CSS动画代码：

.svgspan {
width:30vw;
height:30vh;
}
#pfad{
  fill: crimson;
  transition: all 1s ease-in-out;
}
#pfad:hover {
d: path("M 500,1000 C 420,820 0,600 0,300 0,0 380,-120 500,150 620,-120 1000,0 1000,300 c 0,300 -420,520 -500,700 z"); 
fill: red;
}

<div class="svgspan">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" >
    <path id="pfad" class="st0"
      d="M 500,1000 C 220,1000 0,780 0,500 0,220 220,0 500,0 c 280,0 500,220 500,500 0,280 -220,500 -500,500 z">
      
    </path>
  </svg>
</div>

【讨论】：