SVG线条绘制-对多个SVG使用相同的javascript函数

我最近进入了SVG操作的世界，使用JS和CSS的混合体。在这里，我有一条SVG线作为使用JavaScript绘制的路径

JS:

HTML:

这对于一个SVG实例和一个页面上id为“roundelPath”的路径非常有效，但是如果我想要多个id不同的SVG实例呢？我尝试使用getElementsByClassName，但它抱怨getTotalLength

---

希望这是一个简单的解决办法。有人能帮忙吗？

这里有一个有效的例子：

JS:

使用不同的ID调用函数：

drawRoundel('roundelPath1');

或

---

您发布的内容是否适用于某个元素，或者是否缺少某些内容？为什么要发布有效的代码？你的

getElementsByClassName（）

想法应该行得通。如果不是，则发布该代码。别忘了包含一个。@PaulLeBeau代码不起作用。这就是为什么我在26分钟前没有发布解决方案，只是将id作为参数传递给函数，而不是硬编码。谢谢@RobertLongson

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 415 415" width="415" height="415">
  <path id="roundelPath" stroke-width="22" d="M181.7,265.6l84.8,123.7c-18.1,5.6-37.3,8.7-57.2,8.7c-106,0-191.9-85.9-191.9-191.9c0-45,15.5-86.3,41.4-119.1
    l0.2-0.2l128.7,187.4c21.6,27.7,54.6,38.3,89.8,38.3c67.6,0,123.1-55.5,123.1-123.2c-5.8-66.1-45.1-122.7-100.8-152.5l-0.1,0.1
    l-85.9,59.9l-0.1,0c-15.1,10.3-25,27.7-25,47.3c0,31.6,25.6,57.3,57.3,57.3c31.6,0,57.3-25.6,57.3-57.3S277.6,87,245.9,87
    c-11.8,0-23.1,3.8-32.2,9.9l-0.1,0.1L56.9,206.3"/>
</svg>

    function drawRoundel(id) {
      var path = document.getElementById(id);
      var length = path.getTotalLength();
      path.style.transition = path1.style.WebkitTransition = 'none';
      path.style.strokeDasharray = length + ' ' + length;
      path.style.strokeDashoffset = length;
      path.getBoundingClientRect();
      path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 3s ease-in-out';
      path.style.strokeDashoffset = '0';
    }

drawRoundel('roundelPath1');

drawRoundel('roundelPath2');