从左到右绘制 SVG 线

Question

我遇到了 SVG 动画的问题。我需要为 SVG 设置动画，就好像它是从左到右绘制的一样 see the SVG

这样可以吗？ SVG 代码如下，以备不时之需

<svg width="1920" height="399" viewBox="0 0 1920 399" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="969" cy="209" r="189" stroke="black" stroke-width="2"/>
<circle cx="529" cy="209" r="189" stroke="black" stroke-width="2"/>
<circle cx="1409" cy="209" r="189" stroke="black" stroke-width="2"/>
<path d="M0 192C156.295 128.885 480.909 6.14397 529 20.0956" stroke="black" stroke-width="2"/>
<path d="M1920 190C1765.48 127.615 1444.55 6.2926 1397 20.083" stroke="black" stroke-width="2"/>
<path d="M488 26C574.756 7.13441 802.014 -19.2774 1017 26" stroke="black" stroke-width="2"/>
<path d="M922 26C1008.76 7.13441 1236.01 -19.2774 1451 26" stroke="black" stroke-width="2"/>
</svg>

我正在尝试使用 SVG Artista 服务制作动画。我已经尝试将所有路径和圆圈合并到 1 条路径中，但没有帮助。

提前致谢！

更新：

我被要求添加一个我得到的路径代码，这里是：

<svg width="100%" height="399" viewBox="0 0 1920 399" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M1220,209a189,189 0 1,0 378,0a189,189 0 1,0 -378,0 M340,209a189,189 0 1,0 378,0a189,189 0 1,0 -378,0 M780,209a189,189 0 1,0 378,0a189,189 0 1,0 -378,0 M0 192C156.295 128.885 480.909 6.14397 529 20.0956 M1920 190C1765.48 127.615 1444.55 6.2926 1397 20.083 M488 26C574.756 7.13441 802.014 -19.2774 1017 26 M922 26C1008.76 7.13441 1236.01 -19.2774 1451 26" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>

Answer 1

最大路径长度为5554px 要动画线条的增长，请使用属性stroke-dasharray

点击画布 SVG 后动画开始

.container {
width:75vw;
height:75vw;
}
#move_path {
fill:none;
stroke:black;
stroke-width:2;
stroke-dasharray: 0,5554;
}

<div class="container">
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 1920 399" fill="none" version="1.1">

  <path id="move_path"  d="m0 192c0 0 156.5-61.7 235.7-90.1 57.1-20.5 114.2-41.7 172.6-58.1 33.9-9.5 67.7-22.7 102.9-23.2 34.9-0.5 71.7 4.2 102.9 19.9 32.9 16.6 63.3 42.6 81.3 74.7 19.6 34.9 27.3 78 23.2 117.8-3.2 31.9-17.4 63.5-37.1 88.8-19.4 25-47.3 43.4-75.8 57.2-23.7 11.5-50 19.9-76.3 19.9-30.9 0-62.2-9-89.6-23.2-25.8-13.4-49.8-32.6-66.4-56.4-19.2-27.6-32.8-61.1-34.9-94.6-2.4-38.6 6.6-79.8 26.6-112.9 20.8-34.6 54.7-62.6 91.3-79.7 36-16.8 78.4-13.2 117.8-18.3 33.1-4.2 66.3-7.7 99.6-10 30.4-2.1 60.8-3.4 91.3-3.3 28.8 0 57.6 1.7 86.3 3.3 29.4 1.7 58.8 2.7 88 6.6C965.5 14.2 992.1 17.4 1017 26c25.3 8.7 51.1 19.1 71.8 36.1 22.2 18.2 42.5 41.3 53.1 68 15 37.7 19.8 81.4 11.6 121.2-6.9 34-26.2 65.9-49.8 91.3-17.9 19.4-41.2 35.1-66.4 43.2-38 12.1-80.6 13.9-119.5 5-26.3-6-50.9-20.5-71.2-38.3-25-22-47.6-49.7-58.3-81.2-11.7-34.6-11.7-74-3.3-109.5 7.2-30.6 23.8-59.6 44.8-83 18.8-21 40-34.1 69.7-48.1 17.6-8.3 78.6-17.2 118.3-20.5 43.2-3.6 78.2-8.1 117.4-9.4 34.8-1.1 69.7 0.3 104.6 1.7 34.3 1.4 68.7 2.9 102.9 6.6C1379 13 1416.3 14.6 1451 26c31.8 10.4 66.5 21.5 89.2 46 33.7 36.4 56.1 87.4 57.8 137 1.4 40.6-14.9 83-39.5 115.3-23.9 31.3-60.1 55.4-97.9 66.4-36.1 10.5-77.2 8.8-112.9-3.3-34.9-11.9-66.2-36.2-89.6-64.7-18.5-22.6-31.8-50.8-36.5-79.7-5.9-36.2-2.3-75.6 11.6-109.5 11.3-27.6 32.6-51.1 55.6-70.1 18.1-15 39.6-26.7 62.3-32.8C1383.2 21.8 1417.9 22 1451 26c38.8 4.6 75.2 21 112.4 32.8 55.2 17.5 109.8 36.9 164.3 56.4 41.7 15 83.3 30.3 124.5 46.6C1875 170.8 1920 190 1920 190" >
    <animate attributeName="stroke-dasharray" begin="svg1.click" dur="10s" values="0,5554;5554,0" fill="freeze" />
  </path>
</svg>
</div>

CSS 动画

.container {
width:75vw;
height:75vw;
}
#move_path {
fill:none;
stroke:black;
stroke-width:2;
stroke-dasharray: 0,5554;
animation: draw 10s forwards;
}
@keyframes draw {
to{stroke-dasharray:5554,0}
}

<div class="container">
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 1920 399" fill="none" version="1.1">

  <path id="move_path"  d="m0 192c0 0 156.5-61.7 235.7-90.1 57.1-20.5 114.2-41.7 172.6-58.1 33.9-9.5 67.7-22.7 102.9-23.2 34.9-0.5 71.7 4.2 102.9 19.9 32.9 16.6 63.3 42.6 81.3 74.7 19.6 34.9 27.3 78 23.2 117.8-3.2 31.9-17.4 63.5-37.1 88.8-19.4 25-47.3 43.4-75.8 57.2-23.7 11.5-50 19.9-76.3 19.9-30.9 0-62.2-9-89.6-23.2-25.8-13.4-49.8-32.6-66.4-56.4-19.2-27.6-32.8-61.1-34.9-94.6-2.4-38.6 6.6-79.8 26.6-112.9 20.8-34.6 54.7-62.6 91.3-79.7 36-16.8 78.4-13.2 117.8-18.3 33.1-4.2 66.3-7.7 99.6-10 30.4-2.1 60.8-3.4 91.3-3.3 28.8 0 57.6 1.7 86.3 3.3 29.4 1.7 58.8 2.7 88 6.6C965.5 14.2 992.1 17.4 1017 26c25.3 8.7 51.1 19.1 71.8 36.1 22.2 18.2 42.5 41.3 53.1 68 15 37.7 19.8 81.4 11.6 121.2-6.9 34-26.2 65.9-49.8 91.3-17.9 19.4-41.2 35.1-66.4 43.2-38 12.1-80.6 13.9-119.5 5-26.3-6-50.9-20.5-71.2-38.3-25-22-47.6-49.7-58.3-81.2-11.7-34.6-11.7-74-3.3-109.5 7.2-30.6 23.8-59.6 44.8-83 18.8-21 40-34.1 69.7-48.1 17.6-8.3 78.6-17.2 118.3-20.5 43.2-3.6 78.2-8.1 117.4-9.4 34.8-1.1 69.7 0.3 104.6 1.7 34.3 1.4 68.7 2.9 102.9 6.6C1379 13 1416.3 14.6 1451 26c31.8 10.4 66.5 21.5 89.2 46 33.7 36.4 56.1 87.4 57.8 137 1.4 40.6-14.9 83-39.5 115.3-23.9 31.3-60.1 55.4-97.9 66.4-36.1 10.5-77.2 8.8-112.9-3.3-34.9-11.9-66.2-36.2-89.6-64.7-18.5-22.6-31.8-50.8-36.5-79.7-5.9-36.2-2.3-75.6 11.6-109.5 11.3-27.6 32.6-51.1 55.6-70.1 18.1-15 39.6-26.7 62.3-32.8C1383.2 21.8 1417.9 22 1451 26c38.8 4.6 75.2 21 112.4 32.8 55.2 17.5 109.8 36.9 164.3 56.4 41.7 15 83.3 30.3 124.5 46.6C1875 170.8 1920 190 1920 190" >
    <!-- <animate attributeName="stroke-dasharray" begin="svg1.click" dur="10s" values="0,5554;5554,0" fill="freeze" /> -->
  </path>
</svg>
</div>