Как получить дескриптор записей в группе SVG <g>?

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 пытается найти элемент по его уникальному идентификатору. Спецификация DOM гласит:

getElementById ... Возвращает элемент чей ID дается elementId. Если нет такой элемент существует, возвращает ноль. Поведение не определено, если более чем один элемент имеет этот идентификатор .

Если у вас есть ссылка на интересующий вас элемент ловушки, то я бы предложил использовать getElementsByTagName (который возвращает коллекцию элементов с указанным именем тега):

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

В качестве альтернативы, как говорит Цури Бар Йохай, если опция jQuery.SVG является опцией, с ней будет намного проще работать с селекторами.

Answer 2

Я только что посмотрел на этот и думаю, что может использовать childNodes для этой задачи.

, например

getElementById("SVG").childNodes

Кстати, посмотрите на плагин jQuery.SVG ( ссылка )

Answer 3

Вы, вероятно, можете использовать API селекторов для этого, если вам вполне достаточно требовать сравнительно недавних выпусков браузера.

Кажется, что вы хотите QuerySelector :

var rh = document.getElementById("right_hook");
var wheel = rh.querySelector("#wheeltap");

Я не проверял, работает ли он с неуникальными идентификаторами: s.