Динамическая анимация элемента пути SVG на JS - PullRequest
Новая
       101

Динамическая анимация элемента пути SVG на JS

1 голос
/ 02 августа 2020

У меня есть строка пути SVG, и мне нужно анимировать путь, я читал различные статьи, и мне не удалось добиться, 

const vectorGroup = document.getElementById("vectorGroup");

function createPathElement(d) {
  const pathElement = document.createElementNS(
    "http://www.w3.org/2000/svg",
    "path"
  );

  vectorGroup.appendChild(pathElement);

  var anim = document.createElementNS("http://www.w3.org/2000/svg", "animate");
  anim.setAttribute("begin", "indefinite");
  anim.setAttribute("values", d);
  anim.setAttribute("dur", "3s");
  anim.setAttribute("attributeName", "d");
  anim.setAttribute("repeatCount", "indefinite");
  pathElement.appendChild(anim);
  anim.beginElement();
}

let val =
  "M875 1831 c-3 -6 -15 -11 -26 -11 -11 0 -18 -4 -15 -9 3 -5 -3 -11  -14 -14 -21 -5 -29 -47 -9 -47 6 0 9 5 7 12 -5 14 61 50 79 44 7 -3 15 -1 18  4 4 6 13 10 21 10 8 0 12 -4 9 -10 -3 -5 -2 -10 4 -10 5 0 13 -10 17 -22 4  -13 11 -26 17 -30 7 -4 6 -13 -3 -25 -14 -17 -14 -17 7 0 18 16 23 16 30 4 4  -8 18 -19 31 -26 19 -10 22 -9 22 8 0 13 -5 19 -14 15 -8 -3 -17 0 -22 7 -4 7  -3 10 4 5 12 -7 10 7 -7 48 -9 23 -14 26 -26 16 -15 -12 -20 -4 -16 23 0 4 -2  7 -6 8 -5 0 -29 3 -55 5 -27 3 -49 1 -53 -5z m130 -51 c21 0 38 -27 24 -36 -7  -4 -15 -2 -17 4 -2 7 -9 12 -16 12 -7 0 -18 11 -24 25 -17 36 -14 44 5 18 8  -13 21 -23 28 -23z";
createPathElement(val);

https://jsfiddle.net/3afmjecq/1/

Я прикрепил свою ссылку jsfiddle для исходного кода.

Может ли кто-нибудь указать мне, где я делаю это неправильно

...