这个包含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:
<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中鼠标检测的更多信息,我推荐这本书:Using SVG with CSS3 and HTML5: Vector Graphics for Web Design
我希望它有所帮助。