以下の例の SVG パスについて 2 つの質問があります。
- パスを次々にアニメーション化するにはどうすればよいですか?
- 1 つのパスにマージできますか?
サンプル：
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1" baseProfile="full">
<path d="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88" style="fill:none;stroke:black;stroke-width:2" />
<path d="M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59" style="fill:none;stroke:black;stroke-width:2">
<animate attributeName="stroke-dasharray" values="0,100;100,100" begin="0s" dur="5s" /></path>
</svg>