命中测试 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屋！