demo · v136

Hit-test overlay

A real-world use: drag the mouse over the SVG path. Each frame we call isPointInFill({x, y}) and isPointInStroke({x, y}) with a plain object literal — no SVGSVGElement.createSVGPoint() dance, no ceremony.

Probes the new DOMPointInit signature.
cursor
isPointInFill({x,y})
isPointInStroke({x,y})

the code

// 136+: plain object literals everywhere
const inFill = path.isPointInFill({ x: clientX, y: clientY });
const inStr  = path.isPointInStroke({ x: clientX, y: clientY });

// pre-136 you had to do:
//   const pt = svg.createSVGPoint(); pt.x = clientX; pt.y = clientY;
//   path.isPointInFill(pt);

why this angle

The sibling concept shows the API surface. This concept exercises it inside a live hit-test loop — the actual situation that benefits from the lighter syntax (a hot mousemove handler).

see also