命中测试SVG形状？

Question

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

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

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

谢谢

Answer 1

SVG 1.1 DOM有正确的方法(不幸的是它还没有在mozilla中实现):

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

有关完整的工作示例,请参见此处.

Answer 2

我不知道有什么方法可以交叉整个矩形.但是你可以交叉一个点,所以你可以建立一个更复杂的检查:

var el= document.elementFromPoint(x, y);

将为您提供特定页面相对坐标的最高堆叠元素.<svg>如果没有击中SVG内的形状,你将获得该元素.

这是一个非标准的Mozilla扩展,但它也适用于WebKit.不幸的是,虽然它存在于Opera中,但它不会查看内部<svg>,因此在该浏览器中元素将始终是SVGSVGElement.