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에서 애니메이션을 적용하려는 유사한 개체가 여러 개 있습니다. 물론 각각의 하위 객체에 전 세계적으로 고유 한 이름을 지정할 수 있습니다 (s.a. "right_hook_wheeltap", "left_hook_wheeltap"하지만 그게 끔찍합니다).

Answer 1

getElementById은 고유 한 ID로 요소를 찾으려고합니다. DOM specification states:

getElementById는 ... 그 elementId로부터 주어진 ID 요소 를 돌려줍니다. 해당 요소가 존재하지 않으면 null을 리턴합니다. 두 개 이상의 요소에이 ID가있는 경우 동작이 정의되지 않습니다..

당신이 관심있는 후크 요소에 대한 참조를 가지고 있다면, 나는 (지정된 태그 이름을 가진 요소의 컬렉션을 반환하는) 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가 옵션 인 경우 선택기를 사용하면 훨씬 쉽게 작업 할 수 있다고 말합니다.

Answer 2

방금 ​​this one을보고 그 작업에 childNodes을 사용할 수 있다고 생각합니다.

BTW

getElementById("SVG").childNodes 

, 당신은 오히려 최근의 브라우저 버전을 필요로 괜찮 경우 당신은 아마, 그 일을 위해 Selectors API을 사용할 수 있습니다 jQuery.SVG 플러그인 (link)

Answer 3

를 보라.

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

나는 그것이 고유하지 않은 ID로 작동하는지 확인하지 않은 :

은 당신이 원하는 것은 QuerySelector 것 같다 생각이야.