问题描述
我试图弄清楚为什么它不能将此路径数据变形为另一个路径数据,我需要使其看起来像真实的动画。
这是我的SMIL代码:
<animate xlink:href="#Barra3"
repeatCount="indefinite"
attributeName="d"
dur="5s"
values="M52,346L56,346C61.523,346 66,350.477 66,356L42,356C42,350.477 46.477,346 52,346Z;
M54,225C60.627,225 66,230.373 66,237L66,237C42,230.373 47.373,225 54,225Z;"/>
这是我的codepen:
https://codepen.io/joannesalfa/pen/mdPBJxq 并转到第181行。我正在使用SMIL。
解决方法
在svg中尝试变形路径时,最重要的是使d属性具有相同数量的命令和相同的命令。我重写了短路径,以便绘制形状侧面的线的长度为0。
M54,346 C60.627,346,66,351.373,358 L66,358L42,358L42,358 C42,47.373,54,346Z
请看看:
svg{border:solid}
<svg viewBox="5 200 100 200" width="100">
<path d="M54,346
C60.627,358
L66,358
C42,346Z" stroke="red" fill="gold" >
<animate dur='5s'
attributeType="XML"
attributeName='d'
repeatCount='indefinite'
values="M54,225
C60.627,225 66,230.373 66,236
L66,356L42,236
C42,230.373 47.373,225 54,225Z;
M54,346
C60.627,356
L66,356
C42,346Z;
M54,225Z" />
</path>
</svg>
更新
OP正在评论:
您介意如何逐步重写短路径吗?我觉得这让我很困惑
我将同时使用这些路径,并将它们分成5种不同颜色的路径,每条命令一条。请注意,我必须在每个路径的开头添加对命令(M)的移动。移至的值是上一条路径的最后一点。线条是蓝色的路径。
对于短路径,您可以在代码中看到那些蓝色路径,但在svg中却看不到它们,因为它们的长度为0。我需要那些长度为0的行,因为您在长路径中有行。
svg{width:200px;border:solid;overflow:visible; fill:none}
<svg viewBox="40 220 28 140" >
<desc>The short path</desc>
<path d="M54,346 C60.627,356" stroke="red" />
<path d="M66,356 L66,356" stroke="blue" />
<path d="M66,356 L42,356" stroke="green" />
<path d="M42,356" stroke="blue" />
<path d="M42,356 C42,346" stroke="gold"/>
</svg>
<svg viewBox="40 220 28 140" >
<desc>The long path</desc>
<path d="M54,225 C60.627,237" stroke="red"/>
<path d="M66,237 L66,356" stroke="blue" />
<path d="M66,356" stroke="green" />
<path d="M42,237" stroke="blue"/>
<path d="M42,237 C42,225;" stroke="gold"/>
</svg>