SVG线上升动画从头到尾

Question

美好的一天。请告诉我。为什么线的增长会在每个坐标之后分别出现（由M给出）。即，在整个曲线的不同楼层上，线会同时同时爬行。 但是有必要使整个曲线成一条直线。

<svg xmlns="http://www.w3.org/2000/svg" width="1170" height="3650"><path d="M150 200 H 1000 Q 1150 200 1150 350 M150 200 H 1000 Q 1150 200 1150 350 M150 200 H 1000 Q 1150 200 1150 350 M1150 350 Q 1150 500 1000 500 H 150 Q 0 500 0 650 M1150 350 Q 1150 500 1000 500 H 150 Q 0 500 0 650 M1150 350 Q 1150 500 1000 500 H 150 Q 0 500 0 650 M0 650 Q 0 800 150 800 H 1000 Q 1150 800 1150 950 M0 650 Q 0 800 150 800 H 1000 Q 1150 800 1150 950 M0 650 Q 0 800 150 800 H 1000 Q 1150 800 1150 950 M1150 950 Q 1150 1100 1000 1100 H 150 Q 0 1100 0 1250 M1150 950 Q 1150 1100 1000 1100 H 150 Q 0 1100 0 1250 M1150 950 Q 1150 1100 1000 1100 H 150 Q 0 1100 0 1250 M0 1250 Q 0 1400 150 1400 H 1000 Q 1150 1400 1150 1550 M0 1250 Q 0 1400 150 1400 H 1000 Q 1150 1400 1150 1550 M0 1250 Q 0 1400 150 1400 H 1000 Q 1150 1400 1150 1550 M1150 1550 Q 1150 1700 1000 1700 H 150 Q 0 1700 0 1850 M1150 1550 Q 1150 1700 1000 1700 H 150 Q 0 1700 0 1850 M1150 1550 Q 1150 1700 1000 1700 H 150 Q 0 1700 0 1850 M0 1850 Q 0 2000 150 2000 H 1000 Q 1150 2000 1150 2150 M0 1850 Q 0 2000 150 2000 H 1000 Q 1150 2000 1150 2150 M0 1850 Q 0 2000 150 2000 H 1000 Q 1150 2000 1150 2150 M1150 2150 Q 1150 2300 1000 2300 H 150 Q 0 2300 0 2450 M1150 2150 Q 1150 2300 1000 2300 H 150 Q 0 2300 0 2450 M1150 2150 Q 1150 2300 1000 2300 H 150 Q 0 2300 0 2450 M0 2450 Q 0 2600 150 2600 H 1000 Q 1150 2600 1150 2750 M0 2450 Q 0 2600 150 2600 H 1000 Q 1150 2600 1150 2750 M0 2450 Q 0 2600 150 2600 H 1000 Q 1150 2600 1150 2750 M1150 2750 Q 1150 2900 1000 2900 H 150 Q 0 2900 0 3050 M1150 2750 Q 1150 2900 1000 2900 H 150 Q 0 2900 0 3050 M1150 2750 Q 1150 2900 1000 2900 H 150 Q 0 2900 0 3050 M0 3050 Q 0 3200 150 3200 H 1000 Q 1150 3200 1150 3350 M0 3050 Q 0 3200 150 3200 H 1000 Q 1150 3200 1150 3350 M0 3050 Q 0 3200 150 3200 H 1000 Q 1150 3200 1150 3350 M1150 3350 Q 1150 3500 1000 3500 H 150 Q 0 3500 0 3650 M1150 3350 Q 1150 3500 1000 3500 H 150 Q 0 3500 0 3650 M1150 3350 Q 1150 3500 1000 3500 H 150 Q 0 3500 0 3650 " fill="transparent" stroke="lightgrey" stroke-dasharray="2000" stroke-dashoffset="2000" class="anim-line"></path></svg>

.anim-line {
  animation: dash 3s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}