Question

我遇到了SVG checkintersection()功能的问题。我想要做的就是检查一个小的SVG矩形是否与SVG路径的区域相交，但是我无法弄清楚要调用该函数的内容（我已经尝试在SVG DOM对象上调用它）谷歌出现了几个其他的事情）。

所以我需要知道的是在这个片段中放置占位符（“foo”）的内容：

var closedPath = document.getElementById(closedPath);
var rectangle = document.getElementById(rectangle);

if (foo.checkIntersection(closedPath, rectangle)) {
    //do stuff
};

HTML与

一致

<html>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svgroot">
      <g>
        <path id="closedPath" fill="{$c5}" d="M-250179-46928l-5051 1351l-867-1760l-33-146l-12-99l-82-678l-17-249l86-644l305-1800l158-2882l75-1425l-47-280l-22-131l-137-411l-300-892l1273 620l931-109l1957-734l1860-1096l292-192l884 547l2690 2153l480 963l36 244l-948 1878l-376 591l-60 567l-72 1147l97 847l-222 334l-122 117l-2403 2093l-353 76z"/>
        <rect id="rectangle" fill="white" x="-126828" y="0" width="45000" height="45000"/>
      </g>
    </svg>
  </body>
</html>

非常感谢任何帮助！

编辑：只是想补充说我现在使用一种解决方法，它包括使用我编写的解析器函数将SVG路径转换为点坐标数组，然后将其放入一个简单的坐标测试函数中。这也许是一个解决方案Hit-testing SVG shapes?

Answer 1

checkIntersection是<svg>元素上的一个方法，所以你想要这样的东西......

var svg = document.getElementById("svgroot");

var closedPath = document.getElementById(closedPath);
var rectangle = document.getElementById(rectangle);

var rect = svg.createSVGRect();
rect.x = rectangle.animVal.x;
rect.y = rectangle.animVal.y;
rect.height = rectangle.animVal.height;
rect.width = rectangle.animVal.width;

svg.checkIntersection(closedPath, rect) {
    // do stuff
}

另请注意第二个参数必须是SVGRect而不是元素。

SVG元素支持SMIL动画，同样可以编写rectangle.baseVal.x等，但如果你设置矩形动画，则不一定反映矩形的当前位置。如果你没有使用SMIL，那么rectangle.baseVal.x = rectangle.animVal.x

因为<rect>可以包含圆角等内容，所以它没有SVGRect接口，因此您必须从它具有的接口（SVGRectElement）转换为您需要的接口（{{ 3}}）

如何正确使用SVG checkintersection（）函数？

2 个答案: