点击SVG图标时为何有时返回POLYGON子元素而非SVG根元素？

这是浏览器事件机制和DOM元素层级共同作用的结果：

• 点击事件的target会指向实际被点击的最上层可见DOM元素。你的SVG内部的<polygon>是构成图标的图形元素，它在视觉上完全覆盖了SVG的可点击区域，所以点击图标时，浏览器会把这个<polygon>识别为点击目标，而非外层的<svg>元素。
• 只有当你点击到SVG元素中没有子元素覆盖的空白区域时，event.target才会指向SVG本身，这就是为什么你有时会得到SVG元素，有时得到POLYGON元素的原因。

内容的提问来源于stack exchange，提问作者Alston