SVG - getElementsByClassName

Question

  <script type="text/ecmascript">
  <![CDATA[
  function setCoordinates(circle) {
  var centerX = Math.round(Math.random() * 1000);
  var centerY = Math.round(Math.random() * 1000);      
  circle.setAttribute("cx",centerX);
  circle.setAttribute("cy",centerY);
  }
  ]]>
  </script>


  <circle class="circles" cx="500" cy="500" r="25" fill="white" filter="url(#f1)" />
  <circle class="circles" cx="500" cy="500" r="25" fill="white" filter="url(#f1)" />
  <circle class="circles" cx="500" cy="500" r="25" fill="white" filter="url(#f1)" />
  <circle class="circles" cx="500" cy="500" r="25" fill="white" filter="url(#f1)" />
  <circle class="circles" cx="500" cy="500" r="25" fill="white" filter="url(#f1)" />


  <script type="text/ecmascript">
  <![CDATA[
  setCoordinates(document.getElementsByClassName("circles"));
  ]]>
  </script>

这根本没有任何效果。但是，当我使用“getElementByID”并为圆形分配一个ID时，它就可以正常工作。(Opera)

- Maurice Tempelsman

Answer 1

document.getElementsByClassName 返回一个元素集合，因此需要对结果进行迭代：

var elements = document.getElementsByClassName('circles');

for (var i = 0; i < elements.length; i++) {
    var element = elements[i];

    setCoordinates(element);
}

如果您的代码无法正常工作，请检查您的JS控制台。您应该会看到类似于Object has no method 'setAttribute'的错误。

- Blender

---

但我不明白在我的SVG代码中应该把它放在哪里？ - Maurice Tempelsman

抱歉，如果没有一些指导说明它的适用性，我无法接受这个答案。 - Maurice Tempelsman

@Bushy162：Blender 没有尝试修复你的代码，而是帮助你理解 getElementsByClassName()。换句话说：这个方法不返回单个元素，而是返回一个元素集合。（方法名称已经暗示了这一点，看看 Blender 回复中粗体的 s。与没有 "s" 的 getElementById() 相比，它返回一个元素 - 或者没有）。将其视为一个数组，它包含具有指定类的所有元素。如果您只有一个具有这个类的元素，那么它就是一个单元素数组。 - Thomas W

理论方面已经解决了。但是实际操作并不太合理。我看不出Blender提供的代码如何能够运行。 - Maurice Tempelsman

@Bushy162：现在看一下，它应该可以直接使用了。 - Blender