How to use the SVG checkintersection() function correctly?

Question

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.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>

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?

How is it possible that I have *never* heard of [`checkIntersection`](https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement)? (but too bad it requires a rectangle) — ashleedawg, Aug 08 '21 at 14:50

score 7 · Answer 1 · edited Aug 16 '23 at 08:47

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)

edited Aug 16 '23 at 08:47

eshirazi

2,773
1
14
13

answered Sep 21 '13 at 16:16

Robert Longson

118,664
26
252
242

Thank you for your answer! I'm going to try that. But could you explain the difference between an SVGRect and an SVG element? Also, why are you adding animated values? – Tim Winfield Sep 21 '13 at 16:20
I tried it with your code, and I'm pretty sure that I didn't make any mistakes while adjusting, and I got the same error I got when I first tried calling it on the SVG-element (Firefox console says "TypeError: svg.checkIntersection is not a function"). I have a feeling that I'm missing something very basic here, mainly because I only just got into SVG. Any ideas? – Tim Winfield Sep 21 '13 at 16:50
It's not implemented yet in Firefox. Try Opera 12 instead. – Robert Longson Sep 21 '13 at 16:53

score 1 · Answer 2 · answered Nov 02 '16 at 16:15

<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>

How to use the SVG checkintersection() function correctly?

2 Answers2