SVGGeometryElement: isPointInFill() Methode
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2020 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die isPointInFill() Methode des SVGGeometryElement Interfaces bestimmt, ob ein gegebener Punkt innerhalb der Füllform eines Elements liegt. Das point Argument wird als Punkt im lokalen Koordinatensystem des Elements interpretiert.
Syntax
isPointInFill(point)
Parameter
point-
Ein Objekt, das einen Punkt repräsentiert, welcher im lokalen Koordinatensystem des Elements interpretiert wird. Es wird in ein
DOMPointObjekt umgewandelt, indem derselbe Algorithmus wieDOMPoint.fromPoint()verwendet wird.
Rückgabewert
Ein boolescher Wert, der angibt, ob der angegebene Punkt innerhalb der Füllung liegt oder nicht.
Beispiele
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);
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGGeometryElement__isPointInFill |