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

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

javascript html svg

Javascript 如何正确使用SVG checkintersection（）函数？,javascript,html,svg,Javascript,Html,Svg,我的函数有问题。我想做的只是检查一个小的SVG矩形是否与SVG路径区域相交，但我不知道该调用什么函数（我已经尝试在SVG DOM对象上调用它，谷歌还发现了其他一些东西）因此，我需要知道的是在这个片段中为占位符（“foo”）添加什么： var closedPath = document.getElementById(closedPath); var rectangle = document.getElementById(rectangle); if (foo.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路径转换为点坐标数组，然后将其放入一个简单的坐标测试函数中。

另外，这可能是一个解决方案，

checkcrossion是

元素上的一个方法，因此您可能需要这样的解决方案

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

因为a可以有圆角之类的东西，所以它没有SVGRect接口，所以您必须从它的接口（）转换为您需要的接口（）


var rectangle=document.getElementById（'rectangle'）；
var closedPath=document.getElementById（'closedPath'）；
var svgRoot=closedPath.farthestViewportElement；
var rect=svgRoot.createSVGRect（）；
rect.x=rectangle.x.animVal.value；
rect.y=rectangle.y.animVal.value；
rect.height=rectangle.height.animVal.value；
rect.width=rectangle.width.animVal.value；
var hasCrossion=svgRoot.checkCrossion（closedPath，rect）；
console.log（hasIntersection）；

谢谢您的回答！我要试试看。但是你能解释一下SVGRect和SVG元素之间的区别吗？还有，为什么要添加动画值呢？我用你的代码试过了，我很确定在调整时没有犯任何错误，我得到的错误与我第一次尝试在SVG元素上调用它时得到的错误相同（Firefox控制台说“TypeError:SVG.checkIntersection不是一个函数”）。我有一种感觉，我在这里遗漏了一些非常基本的东西，主要是因为我刚刚进入SVG。有什么想法吗？它还没有在Firefox中实现。试试歌剧12。

<svg width="390" height="248" viewBox="-266600, -68800, 195000, 124000" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path id="closedPath" fill="#ff9966" 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="#66ff66" x="-126828" y="0" width="45000" height="45000"/>
</svg>

<script>
var rectangle = document.getElementById('rectangle');
var closedPath = document.getElementById('closedPath');
var svgRoot = closedPath.farthestViewportElement;
var rect = svgRoot.createSVGRect();
rect.x = rectangle.x.animVal.value;
rect.y = rectangle.y.animVal.value;
rect.height = rectangle.height.animVal.value;
rect.width = rectangle.width.animVal.value;
var hasIntersection = svgRoot.checkIntersection(closedPath, rect);
console.log(hasIntersection);

</script>