SVGGraphicsElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGGraphicsElement extends SVGElement

Beschreibung

SVGGraphicsElement ist ein abstraktes Interface. Es gibt also keinen Konstruktor und kein eigenes Tag. Alle SVG-Elemente, die sichtbar etwas zeichnen oder andere grafische Elemente gruppieren, erben davon. Dazu gehören SVGGeometryElement (<rect>, <circle>, <path> …), SVGGElement, SVGSVGElement, SVGTextContentElement, SVGImageElement, SVGUseElement und SVGForeignObjectElement.

Die wichtigsten Bestandteile:

getBBox(options?) gibt die Bounding-Box im lokalen Koordinatensystem des Elements als DOMRect zurück. Das Attribut transform des Elements selbst wird dabei nicht angewendet.
getCTM() gibt die Matrix vom lokalen Koordinatensystem in das Koordinatensystem des nächsten Viewports (<svg>) zurück.
getScreenCTM() gibt die Matrix vom lokalen Koordinatensystem in Bildschirm- bzw. Client-Koordinaten zurück. Das braucht man, um Mauspositionen in SVG-Koordinaten umzurechnen.
transform (SVGAnimatedTransformList, nur lesbar) gibt Zugriff auf das Attribut transform als Objektliste.
requiredExtensions und systemLanguage (SVGStringList) spiegeln die Attribute für bedingte Verarbeitung wider.

Typische Einsatzfälle sind Drag & Drop in SVG-Diagrammen, das Positionieren von Tooltips oder Beschriftungen an Formen, das Zentrieren von Text und das Berechnen einer passenden viewBox.

Parameter

Name	Typ	Default	Beschreibung
$options	{ fill?: boolean, stroke?: boolean, markers?: boolean, clipped?: boolean }	{ fill: true, stroke: false, markers: false, clipped: false }	Nur für `getBBox()`: Legt fest, welche Anteile in die Box einfließen (Füllung, Kontur, Marker, Clipping). Die Unterstützung ist uneinheitlich, siehe Hinweise.

Beispiele

Bounding-Box eines Textes ermitteln und Hintergrund anpassen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');

const label = document.createElementNS(svgNS, 'text');
label.setAttribute('x', '20');
label.setAttribute('y', '40');
label.textContent = 'Umsatz 2024';
svg.append(label);

// Element muss im DOM sein und gerendert werden
const box = label.getBBox();
const bg = document.createElementNS(svgNS, 'rect');
bg.setAttribute('x', box.x - 4);
bg.setAttribute('y', box.y - 2);
bg.setAttribute('width', box.width + 8);
bg.setAttribute('height', box.height + 4);
bg.setAttribute('fill', '#ffe08a');
svg.insertBefore(bg, label);

console.log(label instanceof SVGGraphicsElement, box.width > 0);

true true

Mausposition in SVG-Koordinaten umrechnen (getScreenCTM)

const svg = document.querySelector('svg');
const dot = document.querySelector('#dot'); // <circle id="dot" r="5"/>

svg.addEventListener('pointermove', (event) => {
  const ctm = svg.getScreenCTM();
  if (!ctm) return;
  const pt = new DOMPoint(event.clientX, event.clientY)
    .matrixTransform(ctm.inverse());
  dot.setAttribute('cx', pt.x.toFixed(1));
  dot.setAttribute('cy', pt.y.toFixed(1));
});

viewBox automatisch an Inhalt anpassen

const svg = document.querySelector('svg');
const content = svg.querySelector('g#chart');

const fitViewBox = (padding = 10) => {
  const { x, y, width, height } = content.getBBox();
  svg.setAttribute('viewBox',
    `${x - padding} ${y - padding} ${width + 2 * padding} ${height + 2 * padding}`);
};

fitViewBox();
console.log(svg.getAttribute('viewBox'));

z. B. "-10 -10 420 320"

transform-Liste auslesen und verändern

const rect = document.querySelector('rect');
rect.setAttribute('transform', 'translate(50 20) rotate(15)');

const list = rect.transform.baseVal;
console.log(list.numberOfItems);

// Zusätzliche Skalierung anhängen
const svg = rect.ownerSVGElement;
const scale = svg.createSVGTransform();
scale.setScale(2, 2);
list.appendItem(scale);

console.log(rect.getAttribute('transform'));

2 translate(50 20) rotate(15) scale(2 2)

// Wichtig · Fallstricke

Nicht gerenderte Elemente: getBBox() auf Elementen, die nicht im DOM hängen, in display: none liegen oder sich in <defs> befinden, liefert in vielen Browsern eine leere Box (0 0 0 0). Firefox kann in solchen Fällen auch einen Fehler werfen. getCTM() und getScreenCTM() können dann null zurückgeben.
Lokale Koordinaten: getBBox() berücksichtigt weder die Kontur (stroke) noch das eigene Attribut transform. Für Pixelmaße auf dem Bildschirm nimmt man getBoundingClientRect().
Das Objekt options von getBBox() wird nicht überall unterstützt. Chrome und Firefox werten es teilweise aus, Safari ignoriert es größtenteils.
Performance: getBBox() und getScreenCTM() lösen ein Layout aus. Wer sie in Schleifen oder bei pointermove aufruft, sollte die Werte zwischenspeichern oder die Aufrufe mit requestAnimationFrame bündeln.
Die älteren Eigenschaften nearestViewportElement, farthestViewportElement und getTransformToElement() wurden in SVG 2 entfernt. Chrome hat sie nicht mehr, deshalb sollte man sie nicht verwenden.

Siehe auch

SVGGradientElement SVGMPathElement SVGPathElement SVGRectElement SVGAElement