命中testingSVG形状？
已经实现了部分SVG规范的浏览器（Firefox等）为我们免费提供了testing – 如果我在SVG对象上附加了一个mousedown监听器，每当点击形状时我都会得到通知。 这是惊人的，特别是对于复杂的多边形形状。
我想知道是否有一种方法可以利用这个function进行更多的命中testing。 我想知道给定的矩形是否与我的任何SVG形状相交。
例如，我添加了3个复杂的多边形到我的元素。 现在我想知道矩形（40，40，100，100）是否与其中任何一个相交。 有没有人有一个想法，我怎么可能钩入已有的伟大的testing支持可用，而不是自己添加所有的代码？
谢谢
SVG 1.1 DOM只有正确的方法（不幸的是它还没有在mozilla中实现）：
var nodelist = svgroot.getIntersectionList(hitrect, null); 有关完整的示例，请参阅此处 。
我不知道任何交叉整个矩形的方式。 但是你可以交叉点，所以你可以build立一个更复杂的检查：
var el= document.elementFromPoint(x, y);
会给你在一个特定的页面相关的坐标最高的堆叠元素。 如果SVG中没有形状被击中，你会得到<svg>元素。
这是一个非标准的Mozilla扩展 ，但它也适用于WebKit。 不幸的是，虽然它存在于Opera中，但它不会在<svg>内部寻找，因此在该浏览器中，该元素始终是SVGSVGElement。
getIntersectionList在Opera中正常工作。 我的问题是SVG 1.1 Full规范中有关这个方面的函数要求必须渲染元素（以及指针事件的可能目标）才能被检测为命中。 不幸的是，这使得这些function在世界上只有一部分可见的游戏世界中进行命中testing是没有用的。
Chrome的版本checkIntersection（和getIntersectionList）testing元素边界框，而不是元素本身。 我能够写一个我自己的checkIntersection，它使用一个canvas来处理chrome，这个方法对于小矩形来说似乎很好，对于大矩形来说会很慢，所以对于命中testing来说很不错。 这种技术将在Chrome中用作checkIntersection的polyfill，对于小的矩形和其他可能会破坏checkIntersection实现的浏览器。
- 创build一个使用包含SVG的outerHTML的数据URI的图像（您可能需要在其中包含样式规则），就像这样 （这个图像不一定在页面中）。 您可以使用onload事件处理程序来确定何时加载，如果您需要。
- 创build一个用于你的命中testing矩形的canvas（这个canvas不需要在页面中）
要testing矩形是否与任何形状相交，请执行以下操作：
- 确保canvas与矩形的大小相同（设置其宽度和高度）
- 使用canvas上下文clearRect（）方法清除canvas
- 在-x，-y的canvas上绘制SVG，使图像中与canvas重叠的部分对应于要使用drawImage（）testing的区域。
- 使用上下文的getImageData（）获取canvas的ImageData。 数据数组的每个第四个元素都是阿尔法字节，非零值表示SVG的一部分与矩形重叠。 如果所有的第4个字节都是0，那么你的SVG不会与矩形相交。
