이벤트 처리기를 SVG 그룹에 동적으로 연결하려면 어떻게합니까?

Question

SVG 그룹 (< g> 태그)에 이벤트 처리기를 추가하면 이상한 동작이 발생합니다. 그것은 부서진 것으로 보인다. 여기에 관련 코드는 다음과 같습니다

var newelement = document.createElementNS("http://www.w3.org/2000/svg", 'use'); 
newelement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', "#Xprototype"); 
var newgroup = document.createElementNS("http://www.w3.org/2000/svg", 'g'); 
newgroup.appendChild(newelement); 
newgroup.setAttribute("transform", "translate(100, 100)"); 
var svg = document.getElementById("thesvg"); 
newgroup.addEventListener("click", elementClick, false); //Click handler is set to the GROUP, not the element 
svg.appendChild(newgroup); 

는 여기에 바이올린입니다 :

http://jsfiddle.net/3bey8heu/2/

나는 다른 개체에 이벤트 처리기를 추가 아무런 문제가 없다 - 동적으로 생성 된 그룹에 고유 한 것으로 보인다. 그리고 예, 그룹은 this 바이올린에서 볼 수 있듯이 마우스 이벤트를 처리 할 수 ​​있습니다.

Answer 1

Only graphics elements can be the target of pointer-events such as click. <g> 요소와 같은 상위 요소에 설정하면 모든 그래픽 하위 요소가 대상이되지만 <g> 자체는 아닙니다.