11

I have closed SVG path that is the province of the country.

How to recognize point(x,y) is inside SVG path or outside by javascript?

3

2 Answers 2

12

For SVGGeometryElement, which includes paths and the basic shapes, there are

They return whether the given point is in the stroke respective in the fill, just as the name suggests.

Example:

const svg = document.getElementById("your-svg");
const path = document.getElementById("your-path");

// SVGPoint is deprecated according to MDN
let point = svg.createSVGPoint();
point.x = 40;
point.y = 32;

// or according to MDN
// let point = new DOMPoint(40, 32);

console.log("In stroke:", path.isPointInStroke(point)); // shows true
console.log("In fill:", path.isPointInFill(point)); // shows false
<svg id="your-svg" width="200" height="200">
  <path d="M 10 80 C 40 10, 65 10, 95 80 S 150 10, 150 110 S 80 190, 40 140 Z" stroke="yellowgreen" stroke-width="5" fill="#adff2f77" id="your-path"/>
  
  <!-- only to show where the point is -->
  <circle id="stroke-point" cx="40" cy="32" r="2.5" fill="red" />
</svg>

Besides being more descriptive than Document.elementFromPoint() those functions handle stacked elements and pointer events correctly. Note that the above example already contains the small circle laying over the path at the requested point. It is not or only hardly possible to check this case with Document.elementFromPoint().

const svg = document.getElementById("your-svg");
const path = document.getElementById("your-path");

console.log("In stroke / fill:", svg.ownerDocument.elementFromPoint(40, 32) == path);
<svg id="your-svg" width="200" height="200">
  <path d="M 10 80 C 40 10, 65 10, 95 80 S 150 10, 150 110 S 80 190, 40 140 Z" stroke="yellowgreen" stroke-width="5" fill="#adff2f77" id="your-path"/>
  
  <!-- only to show where the point is -->
  <circle id="stroke-point" cx="40" cy="32" r="2.5" fill="red" />
</svg>


Edit: Thanks to @Arlo who pointed out that the point representation object to use is not clear. MDN is using a DOMPoint (or DOMPointInit). Chrome assumed to get an SVGPoint which is deprecated according to MDN.

Note that the support on Edge and1 Internet Explorer is unknown at the moment (according to MDN).


1According to MDN Edge ≥79 supports both, isPointInStroke() and isPointInFill().

2
  • 1
    Uncaught TypeError: Failed to execute 'isPointInFill' on 'SVGGeometryElement': parameter 1 is not of type 'SVGPoint'. Seems Chrome is expecting something other than what MSDN is saying.
    – Arlo
    Commented Jun 16, 2020 at 16:10
  • @Arlo Thank's for pointing this out. I changed my answer, this should now work in Chrome (not tested, I don't use Chrome).
    – miile7
    Commented Jun 17, 2020 at 6:59
9

Call document.elementFromPoint. If the position is in the path then it will return that element. If the path is not filled then you may need to adjust the pointer-events property so that it works properly.

3
  • 1
    This does not work in IE nor Edge. It will just return the entire SVG.
    – stuikomma
    Commented Jul 15, 2016 at 10:55
  • you can try this stackoverflow.com/questions/44427394/…
    – shyam_
    Commented Jun 20, 2017 at 1:30
  • @Hack5 You need to call it on the element using the mask, not the mask. Commented Apr 17, 2020 at 9:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.