SVG中的点击事件坐标 [英] Click event coordinates in SVG
问题描述
此包含SVG的HTML:
This HTML containing 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事件处理程序:
and this simple jQuery click event handler:
function clicked(event) {
console.log(event.offsetX, event.offsetY);
}
$('svg').click(clicked);
如此处所示: https://jsfiddle.net/1ht0L8y6/6/有不同之处不同浏览器中的行为:
as seen here: https://jsfiddle.net/1ht0L8y6/6/ have different behaviors in different browsers:
Chrome浏览器:无论我在SVG中的哪个位置单击,坐标都基于SVG元素的左上角.这是我想要的行为.
Chrome: The coordinates are based on the top left of the SVG element, no matter where I click inside the SVG. This is the behavior I want.
Firefox :坐标基于我所处元素的左上角,这些元素可能是SVG,多边形或文本.
Firefox: The coordinates are based on the top left of whatever element I'm in, which may be SVG, polygon, or text.
IE和Edge:
- 在SVG中但不在其任何子元素中时,坐标 基于SVG元素.
- 在多边形中时,坐标为
基于
<g>
组的原点及其translate
偏移量 (即黑钻石).负坐标可能是这种方式, 与Chrome或Firefox不同. - 我观察到一种不同的行为 这些浏览器中的text元素:它们将根据以下信息给出坐标 文本元素的底部中间.但是我无法 在小提琴中重现这一点;在提琴中,文本元素的行为 与这些浏览器中的多边形相同.
- When in the SVG but not in any of its sub-elements, the coordinates are based on the SVG element.
- When in a polygon, the coordinates are
based on the origin of the
<g>
group, with itstranslate
offset (i.e., the black diamond). Negative coordinates are possible this way, unlike in Chrome or Firefox. - I have observed a different behavior for text elements in these browsers: They would give coordinates based on the bottom middle of the text element. But I couldn't manage to reproduce this in the fiddle; in the fiddle text elements behave the same as polygons in these browsers.
获取点击坐标的可靠的跨浏览器方法是什么?
What is a reliable cross-browser way to get the coordinates of the click?
推荐答案
我在您的代码中添加了一个功能,用于检测SVG中的鼠标位置.
I've added to your code a function to detect the mouse position in 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>
To read more about mouse detection in SVG I recommend this book: Using SVG with CSS3 and HTML5: Vector Graphics for Web Design
希望对您有帮助.
这篇关于SVG中的点击事件坐标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!