如何将事件处理程序动态附加到SVG组？

Question

向SVG组添加事件处理程序（＆lt; g＆gt;标记）会导致奇怪的行为。它似乎被打破了。这是相关代码：

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。如果您将其设置在父{8}等元素上，则其所有图形子项都将成为可能的目标，而不是<g>本身。