如何确定鼠标事件附近的SVG元素？ [英] How to determine nearby SVG elements on a mouse event?
问题描述
我使用D3 JavaScript库来构造一个SVG图表，并为它们分配鼠标事件。 SVG图可以是复杂的，使用许多任意路径元素。我一直在努力找出一种方法来确定所有附近的元素在mouseover事件。因此，例如，当鼠标光标在图上移动时，我可以确定光标所在的半径为N像素内的所有组件SVG元素。
我完全被骗了如何解决这个问题。我甚至不确定是否有一个API，允许我确定一个SVG组成元素是否在边界区域内？
任何提示如何解决这个问题将是最
前言：@ Duopixel对您的原始帖子的评论很棒 - 我不知道该方法存在。但是，它似乎只支持一个矩形区域每MSDN文档，而看起来更直观的有一个圆周围的鼠标。
一些其他技术：
-
使用一个不可见的粗线条来展开您的元素，如果您不是使用笔触来造型，或在元素的顶部绘制透明线/形状，该透明线/形状的量较大。收听这些元素的点击事件。
-
对每个元素与鼠标点击半径进行成对比较。我举个例子： http://jsfiddle.net/AkPN2/5/ 。我只实现了圈子，因为它们很简单 - 您需要为矩形添加几何。
I am using D3 JavaScript library to construct an SVG diagram and assign mouse events to them. The SVG diagram can be complex, made with many arbitrary path elements. I have been struggling to figure out a way to determine all the nearby elements on a mouseover event. So, for example, when the mouse cursor moves over the diagram I can determine all the component SVG elements within a radius of N pixels from the cursor.
I am completely stumped on how to tackle this. I am not even sure if there is an API that allows me determine if an SVG constituent element is within a bounding region?
Any hints on how to tackle this would be most appreciated.
Preface: @Duopixel's comment on your original post is great -- I didn't know that method exists. However, it looks like it only supports a rectangular region per the MSDN docs, whereas it seems more intuitive to have a circle around the mouse.
A couple of other techniques:
Use an invisible, thick stroke that "expands" your element, if you're not otherwise using the stroke for styling, or draw a transparent line/shape on top of the element that is some amount larger. Listen to the 'click' event for these elements.
Do a pairwise comparison of every element with that of the mouse's click radius. I made an example here: http://jsfiddle.net/AkPN2/5/. I only implemented circles because they were easy -- you'd need to add the geometry for rectangles.
这篇关于如何确定鼠标事件附近的SVG元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
