Web/API/SVGGeometryElement/isPointInFill

The SVGGeometryElement.isPointInFill() method determines whether a given point is within the fill shape of an element. Normal hit testing rules apply; the value of the pointer-events property on the element determines whether a point is considered to be within the fill. The point argument is interpreted as a point in the local coordiante system of the element.

Syntax

boolean someElement.isPointInFill(DOMPointInit point);

Parameters

point: A DOMPointInit interpreted as a point in the local coordiante system of the element.

Return value

A boolean indicating whether the given point is within the fill or not.

Example

SVG

<svg viewBox="0 0 100 100" width="150" height="150"
    xmlns="http://www.w3.org/2000/svg">
  <circle id="circle" cx="50" cy="50" r="45"
      fill="white" stroke="black" stroke-width="10"/>

  <circle cx="10" cy="10" r="5" fill="seagreen"/>
  <circle cx="40" cy="30" r="5" fill="seagreen"/>
</svg>

JavaScript

var circle = document.getElementById('circle');

// Point not in circle
console.log('Point at 10,10:', circle.isPointInFill(new DOMPoint(10, 10)));

// Point in circle
console.log('Point at 40,30:', circle.isPointInFill(new DOMPoint(40, 30)));

Result

Specifications

Specification	Status	Comment
Scalable Vector Graphics (SVG) 2The definition of 'SVGGeometryElement.isPointInFill()' in that specification.	Candidate Recommendation	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`isPointInFill`	Chrome Full support Yes	Edge Full support ≤79	Firefox Full support 69	IE No support No	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android No support No	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes

Legend

Full support: Full support
No support: No support

SVGGeometryElement.isPointInFill() by Mozilla Contributors is licensed under CC-BY-SA 2.5.