SVGGeometryElement: phương thức isPointInFill()
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.
* Some parts of this feature may have varying levels of support.
Phương thức isPointInFill() của giao diện SVGGeometryElement xác định xem một điểm cho trước có nằm trong vùng tô màu của một phần tử hay không. Tham số point được hiểu là một điểm trong hệ tọa độ cục bộ của phần tử.
Cú pháp
js
isPointInFill(point)
Tham số
point-
Một đối tượng đại diện cho một điểm được hiểu trong hệ tọa độ cục bộ của phần tử. Nó được chuyển đổi thành đối tượng
DOMPointbằng cùng thuật toán nhưDOMPoint.fromPoint().
Giá trị trả về
Một giá trị boolean cho biết liệu điểm cho trước có nằm trong vùng tô màu hay không.
Ví dụ
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 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);
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGGeometryElement__isPointInFill |