admin管理员组

文章数量:1313243

I'm having a problem with the SVG checkintersection() function. All I want to do is to check whether a small SVG-rectangle intersects the area of an SVG-path, but I can't figure out what to call the function on (I already tried to call it on the SVG DOM object, among several other things google turned up).

So what I need to know is what to put in for the placeholder ("foo") in this snippet:

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

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

with the HTML being something along the lines of

<html>
  <body>
    <svg xmlns="; 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>

Any help would be much appreciated!

Edit: Just wanted to add that I now use a workaround, which consists of converting the SVG path to an array of point coordinates using a parser function I wrote, which is then put into a simple coordinate-test function. Also this may have been a solution Hit-testing SVG shapes?

I'm having a problem with the SVG checkintersection() function. All I want to do is to check whether a small SVG-rectangle intersects the area of an SVG-path, but I can't figure out what to call the function on (I already tried to call it on the SVG DOM object, among several other things google turned up).

So what I need to know is what to put in for the placeholder ("foo") in this snippet:

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

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

with the HTML being something along the lines of

<html>
  <body>
    <svg xmlns="http://www.w3/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>

Any help would be much appreciated!

Edit: Just wanted to add that I now use a workaround, which consists of converting the SVG path to an array of point coordinates using a parser function I wrote, which is then put into a simple coordinate-test function. Also this may have been a solution Hit-testing SVG shapes?

  • javascript
  • html
  • svg
Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Sep 21, 2013 at 16:05 Tim WinfieldTim Winfield 511 silver badge3 bronze badges 1
  • How is it possible that I have never heard of checkIntersection? (but too bad it requires a rectangle) – ashleedawg Commented Aug 8, 2021 at 14:50
Add a ment  | 

2 Answers 2

Reset to default 7

checkIntersection is a method on the <svg> element so you'd want something like this...

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;

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

Note also how the second argument has to be an SVGRect and not an element.

SVG elements support SMIL animation, you could equally well write rectangle.baseVal.x etc but that wouldn't necessarily reflect the rectangle's current position if you were animating the rectangle. If you're not using SMIL then rectangle.baseVal.x = rectangle.animVal.x

Because a <rect> can have things like rounded corners it doesn't have an SVGRect interface so you have to convert from the interface it does have (SVGRectElement) to the one you need (SVGRect)

<svg width="390" height="248" viewBox="-266600, -68800, 195000, 124000" version="1.1" xmlns="http://www.w3/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>

本文标签： javascriptHow to use the SVG checkintersection() function correctlyStack Overflow

版权声明：本文标题：javascript - How to use the SVG checkintersection() function correctly? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741938376a2405991.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。