SVGGeometryElement: isPointInFill() Methode
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
* Some parts of this feature may have varying levels of support.
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
DOMPoint
Objekt 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
Specification |
---|
Scalable Vector Graphics (SVG) 2 # __svg__SVGGeometryElement__isPointInFill |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
isPointInFill | ||||||||||||
Accepts a DOMPoint as point parameter |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.