Есть два svg. У верхнего, см. код, с классом line
я без проблем могу отрисовать линию, изменяя значение stroke-dashoffset
от 0 к 600 или наоборот. Но линия там сплошная, без пробелов.
А вот во втором svg линия прерывистая, там значение у stroke-dasharray
- 71.7214,41.8375, а stroke-dashoffset
сколько ни ставь, это не влияет на сдвиг линии.
Как добиться эффекта отрисовки прерывистой линии, как в первом svg для сплошной линии?
https://codepen.io/sergeykomyza/pen/mdvqXgE?editors=1100
<svg class="line" viewBox="0 0 205 236" fill="none"><path class="route-animation" d="M172.114 0.939392C163.546 24.3208 183.614 32.5255 199.675 47.8074C204.434 52.3357 204.888 59.817 199.879 64.3424C189.107 74.0738 148.264 59.9168 150.854 72.7451C153.53 85.9943 188.061 104.531 189.618 105.799C203.284 116.932 207.735 145.174 200.208 160.658C194.852 171.676 159.342 167.962 148.172 164.293C75.024 140.266 107.985 143.131 25.8167 135.67C19.5265 135.099 12.9349 134.806 6.89385 136.65C0.671419 138.549 0.869364 146.339 2.95714 150.55C9.87574 164.506 40.8489 188.178 32.5138 206.523C29.9563 212.152 23.963 215.707 21.2644 221.27C19.1505 225.627 19.3849 230.772 18.4452 235.523" stroke="black" stroke-width="2"></path></svg>
<svg class="line2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 6250 4200" style="enable-background:new 0 0 6250 4200;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#F26166;stroke-width:6;stroke-miterlimit:10;}
.st1{fill:none;stroke:#F26166;}
</style>
<g>
<g>
<path class="st0" d="M89.8,4091.1c4-9.3,8.8-20.4,14.3-33.1"/>
<path class="st1" stroke-width="6" d="M120.6,4019.7c97.3-224.9,333.4-754.8,580.3-1031.4c310.3-347.7,471.1-118.8,727.9-238 c315.2-146.2,415.3-518.1,625.8-754.8c196.9-221.5,468.9-348.4,865.1,12.3c258.8,235.6,463.7,459.9,805.9,426.6 c291.6-28.4,485.3-362.3,612.3-748.5c119.2-362.5,148.6-735.9,447-854.4c308.1-122.2,442.9,238.6,787.4,179.9 c216.1-36.8,289-316.5,388.9-524.3c64.1-133.2,136.3-265.5,175-334.8"/>
<path class="st0" d="M6146.4,134.1c11.2-20,17.7-31.3,17.7-31.3"/>
</g>
</g>
</svg>
.line{
width: 300px;
display: block;
margin-bottom: 100px;
}
.line path{
stroke-dasharray: 600;
stroke-dashoffset: 0;
}
.line2{
width: 600px;
}
.line2 .st1{
stroke-dasharray:71.7214,41.8375;
}