1

вот ее svg код введите сюда описание изображения

<svg width="1340" height="200" viewBox="0 0 1340 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1379.4 199.527C1358.02 59.0626 1039.53 63.6007 794.527 73.6007C550.623 83.556 45 103 1.5271 0.600692" stroke="#574E56" stroke-width="2" stroke-linejoin="round"/>
</svg>

Вопрос , какие свойства сделать , что бы изначально она не была видна, а при добавление класса плавно прорисовывалась

1 ответ 1

5

Как обычно получаем path измеряем его длину ...и всё это на js

var path = document.querySelector('#path');
var pathLength = path.getTotalLength();
path.style.strokeDasharray = pathLength + ' ' + pathLength;
path.style.strokeDashoffset = pathLength;
path.getBoundingClientRect();
window.addEventListener("scroll", function(e) {
  var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  var drawLength = pathLength * scrollPercentage;
  path.style.strokeDashoffset = pathLength - drawLength;
  if (scrollPercentage >= 50) {
    path.style.strokeDasharray = "none";

  } else {
    path.style.strokeDasharray = pathLength + ' ' + pathLength;
  }

});
body {
  height: 1000px;
}


#svg {
  position: fixed;
  top: 50px;
  left: 50%;
  width: 150px;
  height: 150px;
  transform: translateX(-50%)scale(3);
}
<svg viewBox="0 0 1340 200" fill="none" xmlns="http://www.w3.org/2000/svg" id="svg">
<path d="M1379.4 199.527C1358.02 59.0626 1039.53 63.6007 794.527 73.6007C550.623 83.556 45 103 1.5271 0.600692" stroke="#574E56" stroke-width="2" stroke-linejoin="round" fill="none" stroke="red" stroke-width="2" id="path"/>
</svg>

Источник

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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