SVG中的点击事件坐标

Question

这个包含SVG的HTML：

<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不同。
• 我观察到这些浏览器中文本元素的行为不同：它们会根据文本元素底部中心给出坐标。但我无法在这个范例中重现这一点；在这个范例中，文本元素在这些浏览器中的行为与多边形相同。

有没有一种可靠的跨浏览器方法来获取单击的坐标？

- Sam Kauffman

---

我能够重现您的问题，但恐怕需要比我现在拥有的时间更多的时间来回复它。您可以尝试这个SO答案：https://dev59.com/h3PYa4cB1Zd3GeqPmbZO#30708924 - MSC

Answer 1

我已经在你的代码中添加了一个检测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中的鼠标检测，我推荐这本书：Using SVG with CSS3 and HTML5: Vector Graphics for Web Design

希望对你有所帮助。

- enxaneta

---

你已经有2,279个投票，并且从未进行过负面评价！哇！太棒了！你是我所知道的第一个拥有这样结果的人！ - Bharata