javascript - 如何获取 SVG 组中条目的句柄？

Question

在文档中，我可以使用 document.getElementById() 来获取特定唯一元素的句柄。

如何对作为参数给出的组执行相同的操作。

 <g id="right_hook">
  <circle id="wheeltap" r="3" stroke-width="1" />
  <path d="M 0 0 L 200 0 A 5,5 0 0,1 200,20" stroke-width="4" />
 </g>

如果我将此组传递给函数:

 function some( hook ) {
  var tap1= hook.wheeltap;    // does not work
  var tap2= hook.getElementById("wheeltap");   // does not work
}

有什么作用？

我这样做的原因是我有多个相似的对象，我想在 JavaScript 中为它们设置动画。我当然可以为它们的每个子对象指定全局唯一的名称(例如“right_hook_wheeltap”、“left_hook_wheeltap”，但这很糟糕)。

Answer 1

getElementById 尝试通过元素的唯一 ID 查找元素。 DOM specification states:

getElementById... Returns the Element whose ID is given by elementId. If no such element exists, returns null. Behavior is not defined if more than one element has this ID.

如果您有对您感兴趣的钩子(Hook)元素的引用，那么我建议使用 getElementsByTagName (返回具有指定标签名称的元素集合):

function some( hook ) {
  var taps = hook.getElementsByTagName("circle");
  var tap1 = taps[0]; // should contain the element you're looking for
  ...
}

或者，正如 Tzury Bar Yochay 所说，如果 jQuery.SVG 是一个选项，它将使选择器更容易使用。