SVG中的点击事件坐标

问题描述

此HTML包含SVG：

<div class="container">
  <div class="spacer"></div>
  <svg>
    <g id="polygonGroup" transform="translate(80, 50)">
      <polygon points="-60,-10 -35,-30 -10,-10 -10,30 -60,30"></polygon>
      <polygon points="10,-10 35,-30 60,-10 60,30 10,30"></polygon>
      <polygon class="origin" points="-4,0 0,4 4,0 0,-4"></polygon>
    </g>
    <g id="textGroup" transform="translate(80, 50)">
      <text x="-35" y="10">Text</text>
      <text x="35" y="10">Text</text>
    </g>
  </svg>
</div>

这个简单的jQuery click事件处理程序：

function clicked(event) {
    console.log(event.offsetX, event.offsetY);
}

$('svg').click(clicked);

如此处所示： : 在不同的浏览器中具有不同的行为：

Chrome：无论我在SVG内的哪个位置单击，坐标都基于SVG元素的左上角。 这是我想要的行为。

Firefox：坐标基于我所处元素的左上角，这些元素可能是SVG，多边形或文本。

IE和Edge：

• 当在SVG中但不在其任何子元素中时，坐标基于SVG元素。
• 在多边形中时，坐标基于<g>组的原点及其translate偏移量（即黑菱形）。 负坐标可以通过这种方式实现，这与Chrome或Firefox不同。
• 我在这些浏览器中观察到文本元素的不同行为：它们将基于文本元素的底部中间给出坐标。 但是我无法在小提琴中重现这一点。 在小提琴中，文本元素的行为与这些浏览器中的多边形相同。

什么是可靠的跨浏览器方式来获取点击的坐标？