代码之家 › 专栏 › 技术社区 › Tobias Glaus

SVG为D坐标设置动画,即时更改而不是变形

svg-animate svg animation html

Tobias Glaus · 技术社区 · 8 年前

所以我得到了一个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>

1 回复 | 直到 8 年前

ccprog 8 年前

必须匹配的不是点,而是路径命令。或者,换一种方式说:每个字母都必须重复,路径字符串中的每个数字在每个动画状态中都必须具有等价物。只有这样才能计算中间状态。

你似乎想要过渡到只有尖角的形状。这与使用 S 平滑曲线 命令转换将包括更改为另一个命令,这是不可能的。

重新制定 from 带a的路径 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

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>

如果这看起来不像你想要的,记住你可以玩数字,但不能玩字母。

推荐文章

mikko · SwiftUI如何在不同堆栈中实现同一视图的平滑动画

1 年前

Nejib Afdhal · 如何在带有类名的react native中使用顺风动画?

1 年前

user54097 · 滚动菜单项上的导航栏动画文本徽标

1 年前

Simplicissimus · 如何使用javascript为svg转换计时

1 年前

LetsBeHappy · 高CPU的圆形渐变动画

1 年前

Toniq · css从上到中心设置动画

1 年前

Ongky Denny Wijaya · 绘制y=omega*x^2的动画,其中omega从-3到3不等

1 年前

Duck · 如何设置菜单从圆形到椭圆形的动画?

1 年前

MR Lappy · 提要动画最后出现空白

2 年前

Nithin Sai · 如何设置draggableScrollableSheet及其内容的动画?

2 年前