这就是我检测 SVG 行点击的方式:
window.onmousedown = (e) => {
if (e.target.tagName == 'line') {
alert(); // do something with e.target
}
}
svg line:hover { cursor: pointer; }
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" id="svg">
<line x1="320" y1="160" x2="140" y2="00" stroke="black" stroke-width="2"></line>
<line x1="140" y1="00" x2="180" y2="360" stroke="black" stroke-width="2"></line>
<line x1="180" y1="360" x2="400" y2="260" stroke="black" stroke-width="2"></line>
<line x1="00" y1="140" x2="280" y2="60" stroke="black" stroke-width="2"></line>
</svg>
这仅在鼠标光标正好在线时才有效,这并不容易,所以它是糟糕的用户体验。
如何从 Javascript 中检测对 SVG 线的点击,即使不是完全在线,但距离 <= 3 像素?
问题的免费翻译Detect a click on a SVG line even at 3 pixel by @Basj。
有点复杂的解决方案,但有效:
来自 @syduki的答案的松散翻译 。
我们可以使用现有的 Web API
document.elementFromPoint(x, y)
。它返回给定点的最顶层元素。一旦形成用户的点击点,我们就可以导航每个轴并<line>
使用该方法找到第一个元素。当我们得到一个字符串或达到最大搜索距离时,我们停止搜索。在下面的演示中,没有创建其他元素。可变接近控制与要考虑选择的线的最大距离。额外功能:突出显示最靠近鼠标指针的行。因此,用户可以轻松地单击所需的行而没有任何麻烦。
这只是一个您可以摆脱的演示代码。如果您不希望手形光标靠近显示,请删除
onmousemove
并将逻辑移动到onclick
. 只能filter: drop-shadow(...)
突出显示非方形。否则,您可以更改线条的宽度或颜色等。来自 @the Hutt的答案的松散翻译 。