Javascript 通过JS动态设置SVG路径元素的动画

我有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);

我已经附加了源代码的JSFIDLE链接

---

有人能指出我哪里做错了吗

我看没问题。你为什么认为自己“做得不对”？换句话说，它到底应该做什么，这与它正在做的不同？我在3秒钟内看不到路径动画。它在一秒钟内突然出现。我在电话里漏掉了一些东西animation@SadeshKumarN如果要将d属性从一个值设置为另一个值的动画，则至少需要两个由分号（；）分隔的值

let val=“val1；val2”

因为调用beginElement，运行3秒钟，然后立即重复，因此看起来是连续的。在我看来很好。你为什么认为自己“做得不对”？换句话说，它到底应该做什么，这与它正在做的不同？我在3秒钟内看不到路径动画。它在一秒钟内突然出现。我在电话里漏掉了一些东西animation@SadeshKumarN如果要将d属性从一个值设置为另一个值的动画，则至少需要两个值，用分号（；）

let val=“val1；val2”

分隔，这是因为您调用beginElement，运行3秒钟，然后立即重复，因此看起来是连续的。