SVGSVGElement.checkIntersection() — Methode · JavaScript-Referenz

Signatur

SVGSVGElement.prototype.checkIntersection(element, rect)

Beschreibung

checkIntersection() wird auf einem <svg>-Element (SVGSVGElement) aufgerufen. Die Methode prüft, ob ein Grafikelement innerhalb dieses SVG das übergebene Rechteck schneidet, also ganz oder teilweise darin liegt. Das Ergebnis ist ein einfacher Wahrheitswert.

Typische Einsatzfälle sind Auswahlrahmen (Rubber-Band-Selektion) in Zeichen- und Diagrammwerkzeugen, einfache Kollisionsprüfungen und das Ermitteln sichtbarer Elemente in einem Ausschnitt. Das Rechteck wird im Benutzerkoordinatensystem des <svg>-Elements angegeben, also in den Einheiten der viewBox und nicht in Bildschirmpixeln.

Laut Spezifikation zählt ein Element nur dann als Treffer, wenn es auch Ziel von Zeigerereignissen sein könnte. Die Eigenschaft pointer-events und die Sichtbarkeit spielen also eine Rolle. Die Schwestermethode checkEnclosure() prüft dagegen, ob ein Element vollständig im Rechteck liegt.

Parameter

Name	Typ	Default	Beschreibung
$element Pflicht	SVGElement	—	Das Grafikelement, das geprüft wird, z. B. `<rect>`, `<circle>` oder `<path>`. Es muss ein Nachfahre des `<svg>`-Elements sein, auf dem die Methode aufgerufen wird.
$rect Pflicht	SVGRect \| DOMRectReadOnly	—	Das Prüfrechteck im Benutzerkoordinatensystem des `<svg>`-Elements. Am einfachsten erzeugt man es mit `svg.createSVGRect()` und setzt dann `x`, `y`, `width` und `height`.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn der gerenderte Inhalt von element das Rechteck schneidet, sonst false.

Beispiele

Einfache Schnittprüfung

// HTML: <svg id="zeichnung" viewBox="0 0 200 200"><circle id="kreis" cx="50" cy="50" r="20"/></svg>
const svg = document.getElementById('zeichnung');
const kreis = document.getElementById('kreis');

const rect = svg.createSVGRect();
rect.x = 60;
rect.y = 40;
rect.width = 50;
rect.height = 50;

console.log(svg.checkIntersection(kreis, rect));

true

Auswahlrahmen: alle geschnittenen Formen markieren

const svg = document.querySelector('svg');

const markiereImBereich = (x, y, width, height) => {
  const rect = svg.createSVGRect();
  Object.assign(rect, { x, y, width, height });

  const formen = svg.querySelectorAll('rect, circle, path, ellipse');
  const treffer = [...formen].filter((el) => svg.checkIntersection(el, rect));

  formen.forEach((el) => el.classList.toggle('ausgewaehlt', treffer.includes(el)));
  return treffer.length;
};

console.log(`${markiereImBereich(0, 0, 100, 100)} Elemente ausgewählt`);

z. B. "3 Elemente ausgewählt"

Mausposition in SVG-Koordinaten umrechnen, mit Fallback

const svg = document.querySelector('svg');

// Bildschirmkoordinaten -> Benutzerkoordinaten
const toSvgPoint = (clientX, clientY) =>
  new DOMPoint(clientX, clientY).matrixTransform(svg.getScreenCTM().inverse());

// Fallback über getBBox() (ignoriert Transformationen des Elements)
const schneidet = (el, r) => {
  if (typeof svg.checkIntersection === 'function') {
    return svg.checkIntersection(el, r);
  }
  const b = el.getBBox();
  return b.x < r.x + r.width && b.x + b.width > r.x &&
         b.y < r.y + r.height && b.y + b.height > r.y;
};

svg.addEventListener('click', (e) => {
  const p = toSvgPoint(e.clientX, e.clientY);
  const r = svg.createSVGRect();
  Object.assign(r, { x: p.x - 5, y: p.y - 5, width: 10, height: 10 });
  const nah = [...svg.querySelectorAll('circle')].filter((c) => schneidet(c, r));
  console.log('Kreise in der Nähe:', nah.length);
});

Kreise in der Nähe: 1

// Wichtig · Fallstricke

Browser-Kompatibilität: Chromium-Browser (Chrome, Edge, Opera) und Safari unterstützen die Methode. Firefox unterstützt sie nicht, dort ist svg.checkIntersection undefined. Prüfe vor dem Aufruf, ob die Methode existiert, und sieh einen Fallback vor, z. B. über getBBox() oder getBoundingClientRect().
Koordinaten: Das Rechteck wird in Benutzerkoordinaten (viewBox) erwartet, nicht in Bildschirmpixeln. Mauskoordinaten müssen erst mit getScreenCTM().inverse() umgerechnet werden.
Genauigkeit: Implementierungen arbeiten oft mit Begrenzungsrahmen statt mit der exakten Geometrie. Bei Kreisen oder schrägen Pfaden kann es deshalb falsche Treffer geben.
pointer-events: Elemente mit pointer-events: none oder visibility: hidden werden je nach Browser nicht als Treffer gezählt.
Die Methode ist nur auf SVGSVGElement verfügbar, nicht auf beliebigen SVG-Elementen.
Leistung: Bei sehr vielen Elementen pro Mausbewegung wird es langsam. Drossle die Aufrufe, z. B. mit requestAnimationFrame.

Siehe auch

SVGSVGElement.checkEnclosure() SVGSVGElement.createSVGRect() SVGGraphicsElement.getBBox() SVGGraphicsElement.getScreenCTM() SVGSVGElement