Как рисовать линии svg при прокрутке колесиком мышки?

#javascript #css #svg #css_animation

Есть svg, нужно отображать его рисуя линии (его кривые) в зависимости от прокручивания
колесика. То есть крутишь колесико, рисуются линии. Когда один свг нарисовался, нужно
чтобы он медленно исчез и появился другой. На нем тоже нужно отрисовать одну линии
крутя колесико. и тд. Так 25 слайдов. 

Подскажите куда глядеть, и что для этого лучше всего подойдет?
    

Ответы

Ответ 1

Сначала измеряется длина пути патча с помощью команды getTotalLength

Ниже пример измерения длины линии зеленого чекбокса.




  

  
   
 
   




Далее полученная цифра подставляется в stroke-dasharray и  stroke-dashoffset при
этом получается, что длина пробела становится равной длине линии. Затем начинается
плавное уменьшение stroke-dashoffset. Таким образом достигается эффект анимации рисования
линии с чистого листа. У stroke-dasharray два атрибута. Первый задает длину штриха,
второй - пробел, но если они равны, можно ставить только одну цифру.
В примере ниже я сделал двойной эффект - сначала исчезновение контура, затем его
рисование с чистого листа. Для стирания контура stroke-dashoffset ставится в минимальное
значение, затем следует плавное увеличение до максимума. 
Другими словами, если stroke-dashoffset стремится к нулю, то происходит рисование линии.
Если stroke-dashoffset увеличивается, то идет процесс стирания линии.
Практика и теория здесь







Ещё пример






Ответ 2

Эффект "рисования" достигается при помощи установки нужного значения атрибута stroke-dasharray
и плавного изменения атрибута stroke-dashoffset SVG-фигур.

Атрибут stroke-dasharray меняет контуры на штриховые линии вместо сплошных.
stroke-dashoffset определяет смещение начала первого штриха в штриховом паттерне.



var radio = true;

function play() {
  var path = document.getElementById('path');
  path.style.strokeDashoffset = (radio) ? '0' : '988.00';
  radio = !radio;
}