SVGGeometryElement: isPointInStroke()-Methode
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2020.
* Some parts of this feature may have varying levels of support.
Die isPointInStroke()-Methode des SVGGeometryElement-Interfaces bestimmt, ob ein gegebener Punkt innerhalb der Umrissform eines Elements liegt. Das point-Argument wird als Punkt im lokalen Koordinatensystem des Elements interpretiert.
Syntax
js
isPointInStroke(point) Parameter
point-
Ein Objekt, das einen Punkt darstellt, der im lokalen Koordinatensystem des Elements interpretiert wird. Es wird mit demselben Algorithmus in ein
DOMPoint-Objekt umgewandelt wieDOMPoint.fromPoint().
Rückgabewert
Ein boolescher Wert, der angibt, ob der gegebene Punkt innerhalb des Umrisses liegt oder nicht.
Beispiele
SVG
html
<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
js
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 isPointInStroke; try { const pointObj = { x: point[0], y: point[1] }; isPointInStroke = circle.isPointInStroke(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]; isPointInStroke = circle.isPointInStroke(pointObj); } console.log(`Point at ${point[0]},${point[1]}: ${isPointInStroke}`); 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 (isPointInStroke) { 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); } Ergebnis
Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGGeometryElement__isPointInStroke |