这个包含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不同。 - 我观察到这些浏览器中文本元素的行为不同:它们会根据文本元素底部中心给出坐标。但我无法在这个范例中重现这一点;在这个范例中,文本元素在这些浏览器中的行为与多边形相同。
有没有一种可靠的跨浏览器方法来获取单击的坐标?