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 单击事件处理程序：

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

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

如这里所示：https://jsfiddle.net/1ht0L8y6/6/在不同的浏览器中有不同的行为：

Chrome:无论我在 SVG 内部单击什么位置，坐标都基于 SVG 元素的左上角。这就是我想要的行为。

Firefox:坐标基于我所在的任何元素的左上角，该元素可能是 SVG、多边形或文本。

IE 和 Edge：

• 当位于 SVG 中但不在其任何子元素中时，坐标 基于 SVG 元素。
• 当在多边形中时，坐标是 基于的起源<g>集团，以其translate抵消 （即黑钻石）。这样负坐标是可能的， 与 Chrome 或 Firefox 不同。
• 我观察到不同的行为 这些浏览器中的文本元素：它们会根据以下内容给出坐标 文本元素的底部中间。但我没能做到 在小提琴中重现这一点；在小提琴文本元素中表现 与这些浏览器中的多边形相同。

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

我已在您的代码中添加了一个函数来检测 SVG 中的鼠标位置。

let svg = document.querySelector('svg')

function clicked(event) {
  let m = oMousePosSVG(event);
    console.log(m.x,m.y);
}

svg.addEventListener("click", clicked)


function oMousePosSVG(e) {
      var p = svg.createSVGPoint();
      p.x = e.clientX;
      p.y = e.clientY;
      var ctm = svg.getScreenCTM().inverse();
      var p =  p.matrixTransform(ctm);
      return p;
}

svg{border:1px solid}

<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)" fill="red">
      <text x="-35" y="10">Text</text>
      <text x="35" y="10">Text</text>
    </g>
  </svg>
</div>

要了解有关 SVG 中鼠标检测的更多信息，我推荐这本书：将 SVG 与 CSS3 和 HTML5 结合使用：用于网页设计的矢量图形

我希望它有帮助。