有没有一种方法可以为以下 svg 路径的“d”属性设置动画?
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path id="theEl" d="M0 0, L 0 500, L 600 500, L 600 0" stroke="black" stroke-width="10"/>
</svg>
如果我想改变它,我知道这就足够了:
document.getElementById('theEl').setAttribute( 'd', 'M0 0, L 0 200, L 200 200, L 600 0' );
但是如果我们想让它动画/变形呢?假设我有一个按钮,点击它会在这两条路径之间切换。
我已经看到了一些关于它的答案,他们建议创建一个 SVG 动画元素,然后将其添加到 svg DOM 元素中。但这意味着每次单击按钮时,我们都需要附加/删除该动画元素,对吗?没有更简单的方法吗?不使用任何 svg 库?非常感谢!