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 命令的源形状形成对比。转换将包括更改为另一个命令，这是不可能的。

使用from cubic bezier命令重新构建C路径。（添加一些空格和逗号以提高可读性。）而不是

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

＆＃13;

body{
overflow:hidden;
}

＆＃13;

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

＆＃13;

如果您不希望这样，请记住您可以使用数字，但不能使用字母。

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

1 个答案: