SVGSVGElement: checkIntersection() Methode

Die checkIntersection()-Methode des SVGSVGElement-Interfaces überprüft, ob der gerenderte Inhalt des angegebenen Elements das übergebene Rechteck schneidet.

Jedes potenzielle Grafikelement gilt nur dann als Übereinstimmung, wenn dasselbe Grafikelement das Ziel von Pointer-Ereignissen sein kann, wie im pointer-events-Prozess definiert.

Syntax

js
checkIntersection(element, rect)

Parameter

element

Ein Element, das das SVG-Grafikelement darstellt, das überprüft werden soll.

rect

Ein SVGRect-Objekt, das das Rechteck definiert, gegen das geprüft wird.

Rückgabewert

Ein boolean.

Beispiele

Überprüfen, ob ein Element ein Rechteck schneidet

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}`;
  });

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# __svg__SVGSVGElement__checkIntersection

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
checkIntersection

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch