SVG 动画 D 坐标，立即改变而不是变形

Question

所以我得到了一个 SVG 形状：

<path id="shape" d="M1920,975c-611.4-49.2-866.7-298-946.6-602.2S682,0,682,0h1238V975z"/>

我想变成这个：

<path id="shape" d="M1920 119 0 118 0 0 1920 0 1920 119z"/>

我试过这样实现：

<path id="shape" d="M1920,975c-611.4-49.2-866.7-298-946.6-602.2S682,0,682,0h1238V975z"/>

<animate xlink:href="#shape"
    attributeName="d"
    attributeType="XML"
    from="M1920,975c-611.4-49.2-866.7-298-946.6-602.2S682,0,682,0h1238V975z"
        to="M1920 119 0 118 0 0 1920 0 1920 119z"
    dur="5s"
    fill="freeze"/>

但这只是在没有任何动画的情况下立即改变形状，而不是像我想要的那样变形。
两个形状得到相同数量的点 (4)，所以这应该不是问题，对吗？
有谁知道我做错了什么吗？

body{
overflow:hidden;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 1920 1080">
<path id="shape" d="M1920,975c-611.4-49.2-866.7-298-946.6-602.2S682,0,682,0h1238V975z"/>

<animate xlink:href="#shape"
    attributeName="d"
    attributeType="XML"
    from="M1920,975c-611.4-49.2-866.7-298-946.6-602.2S682,0,682,0h1238V975z"
        to="M1920 119 0 118 0 0 1920 0 1920 119z"
    dur="5s"
    fill="freeze"/>
</svg>

Answer 1

需要匹配的不是点，而是路径命令。或者，换句话说：每个字母都必须重新出现，并且路径字符串中的每个数字在每个动画状态下都必须具有等效项。只有这样才能计算中间状态。

您似乎想过渡到只有尖角的形状。这与使用 S smooth curveto 命令的源形状形成对比。转换将包括更改为另一个命令，这是不可能的。

使用 C 三次贝塞尔曲线命令重新制定 from 路径。（添加一些空格和逗号以提高可读性。）而不是

M 1920,975 c -611.4,-49.2 -866.7,-298 -946.6,-602.2 S 682,0 682,0 h 1238 V 975 z

使用

M 1920,975 c -611.4-49.2 -866.7,-298 -946.6,-602.2 C 893.5,68.6 682,0 682,0 h 1238 V 975 z

然后你可以过渡到

M 1920,119 c 0,0 -1920-1 -1920-1 C 0 118 0,0 0,0 h 1920 V 119 z

body{
overflow:hidden;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 1920 1080">
<path id="shape" d="M1920,975c-611.4-49.2-866.7-298-946.6-602.2S682,0,682,0h1238V975z"/>

<animate xlink:href="#shape"
    attributeName="d"
    attributeType="XML"
    from="M 1920,975 c-611.4-49.2 -866.7-298 -946.6-602.2 C 893.5,68.6 682,0 682,0 h 1238 V 975z"
        to="M 1920,119 c0,0 -1920-1 -1920-1 C 0 118 0,0 0,0 h 1920 V 119z"
    dur="5s"
    fill="freeze"/>
</svg>

如果看起来不像您想要的那样，请记住您可以玩弄数字，但不能玩弄字母。

SVG 动画 D 坐标，立即改变而不是变形

SVG animate D coordinates, instantly changes instead of morphing

html

animation

svg

svg-animate