Signatur
Beschreibung
Die Methode createSVGRect() des SVGSVGElement-Interfaces liefert ein neues Rechteck-Objekt vom Typ DOMRect (früher SVGRect). Das Objekt gehört zu keinem Dokumentbaum. Alle vier Koordinaten (x, y, width, height) stehen anfangs auf 0 und lassen sich direkt beschreiben.
Gebraucht wird die Methode vor allem mit älteren SVG-APIs, die ein Rechteck als Argument verlangen. Klassische Fälle sind SVGSVGElement.getIntersectionList(), getEnclosureList() und checkIntersection(). Man kann damit auch Bereiche für eigene Treffertests oder Layout-Berechnungen im SVG-Koordinatensystem beschreiben.
In modernem Code ist new DOMRect(x, y, width, height) meist die bessere Wahl. Der Konstruktor braucht kein <svg>-Element und setzt alle Werte in einem Aufruf. createSVGRect() bleibt aber aus Kompatibilitätsgründen erhalten und funktioniert in allen gängigen Browsern.
Rückgabewert
DOMRect-Objekt, dessen Werte x, y, width und height alle auf 0 stehen.Beispiele
Rechteck erzeugen und befüllen
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const rect = svg.createSVGRect();
console.log(rect.x, rect.y, rect.width, rect.height);
rect.x = 10;
rect.y = 20;
rect.width = 100;
rect.height = 50;
console.log(rect.right, rect.bottom);Elemente in einem Auswahlbereich finden (getIntersectionList)
// Voraussetzung: <svg id="canvas" width="300" height="200"> mit mehreren Formen
const svg = document.getElementById('canvas');
const selectArea = (x, y, width, height) => {
const area = svg.createSVGRect();
Object.assign(area, { x, y, width, height });
// Nicht jeder Browser implementiert getIntersectionList (z. B. Firefox nicht)
if (typeof svg.getIntersectionList !== 'function') return [];
return [...svg.getIntersectionList(area, null)];
};
const hits = selectArea(0, 0, 150, 100);
console.log(`${hits.length} Elemente im Auswahlbereich`);Eigener Treffertest mit getBBox()
const svg = document.querySelector('svg');
const circle = svg.querySelector('circle');
const viewport = svg.createSVGRect();
Object.assign(viewport, { x: 0, y: 0, width: 200, height: 200 });
const intersects = (a, b) =>
a.x < b.x + b.width && a.x + a.width > b.x &&
a.y < b.y + b.height && a.y + a.height > b.y;
console.log(intersects(viewport, circle.getBBox()));// Wichtig · Fallstricke
- Die Methode gibt es nur an
<svg>-Elementen (SVGSVGElement), nicht an anderen SVG-Elementen wie<rect>. - Das zurückgegebene Objekt ist ein reines Werte-Objekt. Änderungen daran wirken sich nicht auf Elemente im Dokument aus.
- Die Werte gelten im Nutzerkoordinatensystem des jeweiligen Kontexts. Sie sind keine Bildschirm-Pixel wie bei
getBoundingClientRect(). - Ältere Browser liefern ein
SVGRect. Nach SVG 2 ist das ein Alias fürDOMRect. Die berechneten Eigenschaftentop,right,bottomundleftgibt es darum nur in modernen Browsern. - Browser-Unterstützung:
createSVGRect()funktioniert in allen aktuellen Browsern. Die Methoden, an die man das Rechteck typischerweise übergibt (getIntersectionList,checkIntersection), fehlen jedoch in Firefox. Für neuen Code istnew DOMRect()vorzuziehen.