命中测试SVG形状？ [英] Hit-testing SVG shapes?

问题描述

已经实现了SVG规范（Firefox等）部分的浏览器免费为我们进行了测试 - 如果我在SVG对象上附加了一个mousedown监听器，我会在点击形状时收到通知。这是惊人的，特别是对于复杂的多边形形状。

The browsers which have implemented parts of the SVG spec (Firefox etc) do hit-testing for us for free - if I attach a mousedown listener on an SVG object, I get notified whenever the shape is clicked. This is amazing, especially for complex polygon shapes.

我想知道是否有一种方法可以利用这个功能进行更多的命中测试。我想知道给定的矩形是否与我的任何SVG形状相交。

I'm wondering if there's a way I can utilize this feature for a bit more hit testing. I want to know if a given rectangle intersects any of my SVG shapes.

例如，我为我的元素添加了3个复杂多边形。现在我想知道矩形（40,40,100,100）是否与它们中的任何一个相交。有没有人知道我怎么可能加入已经很好的热门测试支持，而不是自己添加所有这些代码？

For example, I add 3 complex polygons to my element. Now I want to know if rectangle (40, 40, 100, 100) intersects any of them. Does anyone have an idea how I could possibly hook into the already great hit-testing support available, instead of adding all this code myself?

谢谢

推荐答案

SVG 1.1 DOM有正确的方法（遗憾的是它还没有在mozilla中实现）：

The SVG 1.1 DOM has just the right method (unfortunately it's not yet implemented in mozilla):

var nodelist = svgroot.getIntersectionList(hitrect, null);

有关完整的工作示例，请参阅这里。

For a full working example see here.

这篇关于命中测试SVG形状？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！