javascript - 如何根据点击位置查找嵌套和转换的 SVG 元素(例如圆/路径/...)

Question

我是 Web 开发和 svg 相关主题的初学者。

我认为这对 svg 专家来说应该很容易，但我现在为此苦苦挣扎了一段时间。我在这个主题上找到的所有资源似乎都无法实现我相当简单的目标。

我的应用程序应该在 Chrome 浏览器中运行。

DOM结构如下:

<div>
    <svg>
        <g>
            <circle></circle>
        </g>
    <svg>
</div>

虽然里面可能有更多的 svg 标签或嵌套的 svg 元素，但这是一般设置。

目标:

我想单击某处并找到位于我单击位置的 svg 子元素(例如圆圈)。我想到的基本功能是:

document.elementFromPoint(x, y)

问题:

1)所有元素都可以进行转换，例如平移、缩放和旋转，这使事情变得复杂。

2) 我只想能够单击 svg 节点的子元素。

我的一些尝试:

https://jsfiddle.net/a6uLn9cn/3/

我尝试将“pointer-events:none”放在 DIV 和/或 SVG 节点上。这样，我就可以避免这些是“可点击的”。但这里有两个问题:我需要 SVG 节点上的指针事件，因为它需要缩放和平移，并且还需要单击事件，例如之后圆圈以某种方式“冒泡”到 DIV。

确保仅 svg 节点的子节点“可单击”的另一种方法是检查所找到元素的 element.ownerSVGDocument。如果它为 null 或未定义，我知道找到的元素不是 svg 子元素。

为了解决实际单击已转换的元素(无论是通过其自身还是通过其父元素)的问题，我尝试使用 element.getBoundingClientRect() ，它为我提供了元素的周围矩形。这样，我创建了一个函数来确定单击是否在矩形周围的元素内部:

e是点击事件，elem是document.elementFromPoint()接收到的找到的元素

function clickIsInside(e, elem){
    var clickX = e.clientX;
    var clickY = e.clientY;

    var boxLeft = elem.getBoundingClientRect().left;
    var boxRight = elem.getBoundingClientRect().right;
    var boxTop = elem.getBoundingClientRect().top;
    var boxBottom = elem.getBoundingClientRect().bottom;

    if(clickX >= boxLeft && clickX <= boxRight && clickY >= boxTop && clickY <= boxBottom){
        return true;
    } else {
        return false;
    }
}

但是在我的jsfiddle中，您将无法“单击”路径，例如其boundingClientRect最右侧的路径，如果您想象boundingClientRect在哪里，这对我来说毫无意义。

此外，如果我在添加圆圈后将路径添加到 DOM，我将无法再单击圆圈，而只能单击路径。我完全理解为什么，但是如果我需要同时单击两个怎么办？

我不确定我是否能够解决这里的麻烦，但我将非常感谢你们可以给我的任何意见。非常感谢。

Answer 1

我发现我在问题中所做的大部分事情只是让事情变得复杂。解决方案只是检查找到的元素是否具有任何ownerSVGDElement，如果没有，则不调度单击事件。对元素应用转换似乎没有任何问题，因为 document.elementFromPoint() 足够强大，可以找到转换后的元素。这个问题现在看来没什么用，所以我回答并关闭它只是为了任何人都会遇到或尝试像我一样无脑的事情的罕见情况。

编辑:看来我只能在 2 天内接受这个答案。