SVGSVGElement: checkIntersection() 方法
SVGSVGElement 接口的 checkIntersection() 方法用于检查给定元素的渲染内容是否与提供的矩形相交。
只有当同一个图形元素可以作为指针事件的目标时，才被视为匹配，具体定义请参见 pointer-events 处理。
语法
js
checkIntersection(element, rect)
参数
返回值
布尔值。
示例
检查元素是否与矩形相交
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">Check Intersection</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}`;
});
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGSVGElement__checkIntersection |
浏览器兼容性
加载中…