1

Есть два 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;
}
1
  • 1
    Приветствую! Завтра, в течении дня отвечу вам. Заглядывайте Commented 16 нояб. 2023 в 20:13

1 ответ 1

3

#1 Анимация сплошной линии

Об анимации линии с помощью stroke-dashoffset можно прочитать здесь

  • Для анимации необходимо узнать максимальную длину анимированной линии с помощью метода

JS getTotalLength()

  <!-- Вычисление максимальной длины линии  558 -->
         var path = document.querySelector('#check');
        var len = Math.round(path.getTotalLength() );
        console.log(len);
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
  class="line" viewBox="0 0 205 236" >
  <path id="check" class="route-animation" fill="none" stroke="black" stroke-width="2" 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" >
  </path>
  </svg>

  • Для вычисления правильных размеров viewBox, то есть таких атрибутов viewBox при которых фигура SVG не выходит за границу холста SVG

Используется метод getBBox()

let  bb = check.getBBox();
console.log(bb);
<!-- Нахождение правильного значения атрибутов viewBox   -->
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
  class="line" width="202" height="234" viewBox="1.64 0.9 202 234" style="border:1px solid red;" >
  <path id="check" class="route-animation" fill="none" stroke="black" stroke-width="2" 
      
 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" >
       
  </path>
  </svg>
  

  • Значениями атрибутов из консоли, заменяем старые значения viewBox

  • Добавляем команду анимации

    <animate attributeName="stroke-dashoffset" begin="1s" from="558" to="0" dur="7s" repeatCount="1" fill="freeze" />

  • Добавляем stroke-dashoffset="558" stroke-dasharray="558"

Анимация линии готова

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
  class="line" width="202" height="234" viewBox="1.64 0.9 202 234" style="border:1px solid red;" >
  <path id="check" class="route-animation" fill="none" stroke="black" stroke-width="2" 
      stroke-dashoffset="558" stroke-dasharray="558"
 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" >
       <animate attributeName="stroke-dashoffset" begin="0.5s" from="558" to="0" dur="7s" repeatCount="1" fill="freeze" />
  </path>
  </svg>

#2 Анимация прерывистой линии

Анимацию появления прерывистой линии невозможно сделать точно также, как мы делали анимацию сплошной линии. Так как атрибутом stroke-dasarray линия поделена на черточки и пробелы от начала до конца. Поэтому бесполезно её двигать с помощью stroke-dashofset

Решение заключается в применении маски, которая представляет собой точно такой же путь, как и основа к которой применена маска. mask="url(#msk)" при fill="white" маска прорезает основу и виден только фон. Когда маска сдвигается появляется прерывистая линия, на которую в данном месте уже не влияет маска.
Так возникает эффект рисования прерывистой линии.

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
  class="line" width="404" height="468" viewBox="1.64 0.9 202 234"  >
<defs>
 <mask id="msk"> 
   <path  class="route-animation" fill="none" stroke="white" stroke-width="2" 
      stroke-dashoffset="558" stroke-dasharray="558"
 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" >
        <animate attributeName="stroke-dashoffset" begin="0.5s" from="558" to="0" dur="7s" repeatCount="1" fill="freeze" /> 
  </path>
 </mask>
</defs> 
 <path id="check" class="route-animation" mask="url(#msk)" fill="none" stroke="black" stroke-width="2" 
      stroke-dashoffset="558" stroke-dasharray="5 10"
 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" >
      
  </path>
  </svg>
  

1
  • Спасибо большое! очень полезный и информативный ответ! Commented 17 нояб. 2023 в 19:40

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.