SVG isPointInFill Method Explained

The isPointInFill method is a native SVG Geometry DOM API feature used to determine whether a specific coordinate falls inside the fill area of an SVG graphic element. This article covers the fundamental purpose of the method, its syntax and parameters, how coordinate systems impact its accuracy, and practical use cases for web developers implementing interactive graphics and hit detection.

What is the isPointInFill Method?

The isPointInFill() method is available on instances of SVGGeometryElement (such as <path>, <circle>, <rect>, <polygon>, and <ellipse>). Its primary purpose is hit testing: checking whether a given point lies within the interior shape defined by the element’s fill boundary.

Unlike standard HTML bounding box checks, isPointInFill() evaluates the precise geometric contours of complex paths, offering pixel-accurate hit detection directly through the DOM without manual vector math.

Syntax and Return Value

The method accepts a DOM point object and returns a boolean value.

const isInside = svgGeometryElement.isPointInFill(point);

Parameters

• point: A DOMPoint or DOMPointInit dictionary containing x and y properties representing the coordinates to test.

Return Value

• true: The tested coordinate is located inside the shape’s fill area.
• false: The tested coordinate is outside the fill area.

Coordinate Space Considerations

A critical detail when using isPointInFill() is that the passed coordinate must be in the local user coordinate system of the target SVG element, not in standard viewport or client pixel coordinates (clientX/clientY).

To test mouse or touch events accurately, screen coordinates must first be converted using the element’s Current Transformation Matrix (CTM):

const svg = document.querySelector('svg');
const path = document.querySelector('path');

svg.addEventListener('click', (event) => {
  // Create a DOMPoint from screen coordinates
  const screenPoint = new DOMPoint(event.clientX, event.clientY);
  
  // Transform screen coordinates to the SVG element's local coordinate space
  const ctm = path.getScreenCTM().inverse();
  const localPoint = screenPoint.matrixTransform(ctm);

  // Check if the click is inside the fill
  if (path.isPointInFill(localPoint)) {
    console.log('Point is inside the path fill area.');
  }
});

Influence of the fill-rule Attribute

The calculation of whether a point is “inside” respects the element’s CSS or SVG fill-rule property:

• nonzero (default): Evaluates fill based on the direction of sub-paths winding around the point.
• evenodd: Evaluates fill by drawing a ray from the point to infinity and counting how many path segments it crosses.

Even if an element has its CSS fill set to none or transparent, isPointInFill() still evaluates the geometric fill region as if it were rendered.

Key Differences: isPointInFill vs. isPointInStroke

• isPointInFill(): Tests only the enclosed inner body of the shape.
• isPointInStroke(): Tests only the boundary stroke area of the shape, taking into account stroke-width, stroke-linecap, and stroke-linejoin.

Common Use Cases

• Custom Vector Hit Detection: Detecting user interactions over non-rectangular, complex vector assets like maps, charts, or game sprites.
• Interactive Data Visualizations: Triggering tooltips or highlights only when the cursor enters irregular geographic boundaries or complex SVG chart regions.
• Canvas-to-SVG Collision Checking: Verifying collisions between dynamic elements and static vector boundaries.