次の 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' );
しかし、これをアニメーション化/変形させたい場合はどうすればよいでしょうか? クリックすると、これら 2 つのパスが切り替わるボタンがあるとします。
私はそれについていくつかの回答を見てきましたが、SVG アニメーション要素を作成し、それを svg DOM 要素に追加することを提案しています。しかし、これは、ボタンがクリックされるたびに、そのアニメーション要素を追加/削除する必要があることを意味しますよね? もっと簡単な方法はありませんか？svg ライブラリを使用せずに? 本当にありがとう！