W3cubDocs

/Web APIs

SVGGeometryElement: isPointInFill() method

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2020⁩.

* Some parts of this feature may have varying levels of support.

The isPointInFill() method of the SVGGeometryElement interface determines whether a given point is within the fill shape of an element. The point argument is interpreted as a point in the local coordinate system of the element.

Syntax

isPointInFill(point)

Parameters

point: An object representing a point interpreted in the local coordinate system of the element. It is converted to a DOMPoint object using the same algorithm as DOMPoint.fromPoint().

Return value

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

Examples

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="rgb(0 0 0 / 25%)"
    stroke="rgb(0 0 0 / 50%)"
    stroke-width="10" />
</svg>

JavaScript

const svg = document.getElementsByTagName("svg")[0];
const circle = document.getElementById("circle");
const points = [
  [10, 10],
  [40, 30],
  [70, 40],
  [15, 75],
  [83, 83],
];

for (const point of points) {
  let isPointInFill;

  try {
    const pointObj = { x: point[0], y: point[1] };
    isPointInFill = circle.isPointInFill(pointObj);
  } catch {
    // Fallback for browsers that don't support DOMPoint as an argument
    const pointObj = svg.createSVGPoint();
    pointObj.x = point[0];
    pointObj.y = point[1];
    isPointInFill = circle.isPointInFill(pointObj);
  }

  console.log(`Point at ${point[0]},${point[1]}: ${isPointInFill}`);

  const pointEl = document.createElementNS(
    "http://www.w3.org/2000/svg",
    "circle",
  );
  pointEl.cx.baseVal.value = point[0];
  pointEl.cy.baseVal.value = point[1];
  pointEl.r.baseVal.value = 5;
  const pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");
  if (isPointInFill) {
    pointEl.setAttribute("fill", "rgb(0 170 0 / 50%)");
    pointEl.setAttribute("stroke", "rgb(0 170 0)");
    pathEl.setAttribute("stroke", "rgb(0 170 0)");
    pathEl.setAttribute("d", `M ${point[0] - 5} ${point[1]} h 10 m -5 -5 v 10`);
  } else {
    pointEl.setAttribute("fill", "rgb(170 0 0 / 50%)");
    pointEl.setAttribute("stroke", "rgb(170 0 0)");
    pathEl.setAttribute("stroke", "rgb(170 0 0)");
    pathEl.setAttribute("d", `M ${point[0] - 5} ${point[1]} h 10`);
  }
  svg.append(pointEl, pathEl);
}

Result

Specifications

Specification
Scalable Vector Graphics (SVG) 2> # __svg__SVGGeometryElement__isPointInFill>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`isPointInFill`	33 The element this method is called for must be in the DOM; otherwise, this method will always return `false`.	79 The element this method is called for must be in the DOM; otherwise, this method will always return `false`.	69	20 The element this method is called for must be in the DOM; otherwise, this method will always return `false`.	12	33 The element this method is called for must be in the DOM; otherwise, this method will always return `false`.	79	20 The element this method is called for must be in the DOM; otherwise, this method will always return `false`.	12	3.0	4.4.3 The element this method is called for must be in the DOM; otherwise, this method will always return `false`.	12
`point_parameter_DOMPoint`	136	136	69	121	12	136	79	90	12	No	136	12

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/isPointInFill