SVGSVGElement: phương thức checkIntersection()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Phương thức checkIntersection() của giao diện SVGSVGElement kiểm tra xem nội dung kết xuất của phần tử đã cho có giao nhau với hình chữ nhật được cung cấp hay không.
Mỗi phần tử đồ họa ứng viên chỉ được coi là khớp nếu cùng phần tử đồ họa đó có thể là đích của sự kiện con trỏ như được xác định trong quá trình xử lý pointer-events.
Cú pháp
js
checkIntersection(element, rect)
Tham số
Giá trị trả về
Một boolean.
Ví dụ
Kiểm tra xem một phần tử có giao nhau với hình chữ nhật không
html
<svg id="exampleSVG" width="200" height="200">
<rect
id="checkRect"
x="10"
y="10"
width="100"
height="100"
fill="none"
stroke="red" />
<circle id="targetElement" cx="80" cy="80" r="50" fill="blue" />
</svg>
<button id="checkIntersectionBtn">Kiểm tra giao nhau</button>
<pre id="result"></pre>
js
const svgElement = document.getElementById("exampleSVG");
const checkRect = document.getElementById("checkRect");
const targetElement = document.getElementById("targetElement");
const resultDisplay = document.getElementById("result");
document
.getElementById("checkIntersectionBtn")
.addEventListener("click", () => {
const rect = svgElement.createSVGRect();
rect.x = checkRect.x.baseVal.value;
rect.y = checkRect.y.baseVal.value;
rect.width = checkRect.width.baseVal.value;
rect.height = checkRect.height.baseVal.value;
const isIntersecting = svgElement.checkIntersection(targetElement, rect);
resultDisplay.textContent = `Does the circle intersect with the rectangle? ${isIntersecting}`;
});
Thông số kỹ thuật
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGSVGElement__checkIntersection |