Как анимировать пунктирную линию (SVG)

#javascript #svg #анимация #canvas #css_animation

Есть готовый файл, сохраненный в SVG.
Задача следующая, при наведение сделать его анимированным. 
Суть анимации: рисования элемента от начала до конца.
Я полазил по интернету и нашел подходящий пример анимации:

$(document).ready(function() {

  var canvas = Snap('.main-svg');
  var speed = 1000;
  var line_clients = canvas.path('M349.333,397.333c0,0,46,42.667,146-2.333 c17.917-8.063,79.666-31,87.333,65');
  line_clients.attr({
    class: "line-clients"
  });
  var group_line = canvas.group(line_clients);

  group_line.attr({
    fill: 'none',
    stroke: '#fff',
    strokeWidth: 0
  });


  $.each([line_clients], function(index, value) {
    value.attr({
      strokeDasharray: value.getTotalLength(),
      strokeDashoffset: value.getTotalLength(),
      strokeWidth: 1,
      stroke: '#000'
    });

    value.animate({
        strokeDashoffset: 0
      },
      speed * 2,
      mina.easeinout
    );
  });
});


Только вот, когда открываешь мой SVG, я не ожидал, что там столько текста ради такой
линии.
Я не прошу за себя сделать работу, но может кто-то пнет меня на нужный источник,
а лучше пример.
Находил цент, какой с svg конвертирует в JS. Но я либо не разобрался, либо там нет
возможности анимации.   
    

Ответы

Ответ 1

Рисовать в любом случае придётся. Эту линиую надо изобразить заново одним путём.
Далее варианта два.


использовать оригинальный кривой и ужасный SVG. Поверх накрыть его своей линией цвета
фона, толщины достаточной, чтобы закрыть полностью. Потом анимировать длину штриха
и подобрать смещение так, чтобы кривая поверх «скрывалась», открывая пунктир под ней.
Ниже эта техника подробнее.
если требуется рисовать сплошной линией – можно изобразить прорисовку одного длинного
пути, меняя длину штриха (решение отсюда). Пришлось перерисовать путь, чтобы он стал
одной кривой. Смотрите в полный экран, т.к. кривая крупная.




.path {
  stroke-dasharray: 1490;
  stroke-dashoffset: 1490;
  animation: dash 4s linear forwards;
}

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







Чтобы «рисовать» пунктиром можно сразу нарисовать весь путь пунктиром, а потом поверх
закрыть этой же кривой цвета фона. И её не рисовать, а наоборот, скрывать задом наперёд
той же техникой, как в первом коде. Пример с прорисовкой пунктирной окружности (отсюда):






Ответ 2

Решение SVG + Mask

Трудности с анимацией рисования с помощью пунктирной линии вызваны тем, что пунктирная
линия заполняет всю длину линии или path.    

Поэтому бесполезно пытаться повторить технику рисования, как это делается сплошной
линией с помощью изменения stroke-dashoffset (отступа линии от начала) от максимума
длины линии до нуля.   

Линия заполнена полностью, поэтому она будет просто бежать: 



.path {
  
  stroke-dashoffset: 1490;
  animation: dash 12s linear forwards;
}

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





Решить данную проблему можно с помощью маски, которая сначала полностью повторяет
и закрывает path, затем с помощью stroke-dashoffset постепенно сдвигается и открывает
пунктирную линию, создавая иллюзию появления, рисования пунктирной линии. 



var svg = document.getElementById('svg1');
svg.addEventListener("click",() =>{
  an_stroke.beginElement();
})






У атрибута stroke-dasharray может быть несколько пар параметров.
Используя это свойство можно получить интересный эффекты:  


stroke-dasharray="4 8  36 4", где 4 - черта, 8 - пробел, 36 - черта, 4 - пробел   



var svg = document.getElementById('svg1');
svg.addEventListener("click",() =>{
  an_stroke.beginElement();
})





Рисование из одной точки двумя прерывистыми линиями  



var svg = document.getElementById('svg1');
svg.addEventListener("click",() =>{
  an_str.beginElement();
})







.container {
width:75%;
height:75%;
}





  










Крайний пример взят отсюда


Ответ 3

Вероятно, оторвать руки тому, кто этот svg сделал, и переписать на пунктирную линию
из прямых и дуг. В этом svg не линия - там каждый штришок сделан отдельным замкнутым
контуром из кривых безье - всё это чудо объединено в один path. Думаю, ни у кого нет
ни малейшего желания это анимировать.  



По идее, должно получиться svg из следующего набора команд:

M ... v ... a ... h ... a ... h ... a ... h ...


Ответ 4

Решение SVG + Mask + JS

Можно использовать пунктирную линию в качестве маски для анимированной линии.  



// Получить идентификатор элемента  и длину 
var myline = document.getElementById("myline");
var length = myline.getTotalLength();
circle = document.getElementById("circle");
// Начальная позиция анимации
myline.style.strokeDasharray = length;

// Скройте треугольник, смещая черту. Удалите эту линию, чтобы показать треугольник
перед прокруткой
myline.style.strokeDashoffset = length;

// Найти процент прокрутки при прокрутке (используя свойства кросс-браузера) и сместить
тире столько же, сколько и процент прокрутки
window.addEventListener("scroll", myFunction);

function myFunction() {
  // What % down is it?
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop)
/ (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // Длина для смещения тире
  var draw = length * scrollpercent;

  // тирайте рисунок (при прокрутке вверх)
  myline.style.strokeDashoffset = length - draw;

  //Получить точку
  endPoint = myline.getPointAtLength(draw);
  circle.setAttribute("cx", endPoint.x);
  circle.setAttribute("cy", endPoint.y);

}
body {
  height: 2000px;
  background: #f1f1f1;
}

#circle {
  fill: red;
}

#mySVG {
  position: fixed;
  top: 15%;
  width: 100vw;
  height: 100vh;
  margin-left: -50px;
}

.st0 {
  fill: none;
  stroke-dashoffset: 3px;
  stroke: red;
  stroke-width: 5;
  stroke-miterlimit: 10;
  stroke-dasharray: 20;
}

.mask-style {
  stroke: white;
  stroke-width: 7;
}
Прокрутите это окно, чтобы нарисовать  путь..
Scroll  назад, чтобы повернуть рисунок