SVGGElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGGElement extends SVGGraphicsElement

Beschreibung

SVGGElement ist die DOM-Schnittstelle des SVG-Elements <g> (von „group“). Eine Gruppe fasst Formen, Texte, Pfade oder weitere Gruppen zusammen. Transformationen (transform), Präsentationsattribute wie fill, stroke oder opacity sowie Ereignis-Listener, die an der Gruppe hängen, gelten für alle Kindelemente.

Die Schnittstelle definiert keine eigenen Eigenschaften oder Methoden. Sie erbt alles von SVGGraphicsElement, SVGElement, Element, Node und EventTarget. Besonders nützlich sind dabei:

getBBox(): der umschließende Rahmen aller Kindelemente im lokalen Koordinatensystem
getCTM() und getScreenCTM(): die aktuelle Transformationsmatrix
transform: ein SVGAnimatedTransformList, über das sich Transformationen per Skript ändern lassen

Typische Einsatzfälle sind das gemeinsame Verschieben, Drehen oder Skalieren zusammengesetzter Grafiken (Icons, Diagrammachsen, Spielfiguren), Ebenen in Editoren und die Delegation von Ereignissen an einen gemeinsamen Container. Ein <g> wird selbst nicht gezeichnet und hat keine eigene Größe. Maßgeblich sind immer seine Kinder.

Eine neue Instanz erzeugst du mit document.createElementNS("http://www.w3.org/2000/svg", "g"). Einen öffentlichen Konstruktor (new SVGGElement()) gibt es nicht.

Rückgabewert

Typ

SVGGElement

Beschreibung

Instanzen erhältst du über document.createElementNS() mit dem SVG-Namensraum oder über DOM-Abfragen wie querySelector("g").

Beispiele

Gruppe per Skript erzeugen und befüllen

const SVG_NS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(SVG_NS, "svg");
svg.setAttribute("viewBox", "0 0 200 200");

const group = document.createElementNS(SVG_NS, "g");
group.setAttribute("fill", "tomato");
group.setAttribute("transform", "translate(50 50)");

for (let i = 0; i < 3; i++) {
  const circle = document.createElementNS(SVG_NS, "circle");
  circle.setAttribute("cx", String(i * 40));
  circle.setAttribute("cy", "20");
  circle.setAttribute("r", "15");
  group.append(circle); // Kreise erben fill="tomato"
}

svg.append(group);
document.body.append(svg);

console.log(group instanceof SVGGElement);
console.log(group instanceof SVGGraphicsElement);

true true

Umschließenden Rahmen einer Gruppe ermitteln

// HTML: <svg><g id="icon"><rect x="10" y="10" width="30" height="20"/><circle cx="60" cy="20" r="10"/></g></svg>
const icon = document.querySelector("#icon");
const { x, y, width, height } = icon.getBBox();
console.log(`Rahmen: ${x}, ${y}, ${width} × ${height}`);

Rahmen: 10, 10, 60 × 20

Gruppe per transform-Liste drehen (Animation)

const SVG_NS = "http://www.w3.org/2000/svg";
const svg = document.querySelector("svg");
const wheel = svg.querySelector("g.wheel");

// Leere Transformation anlegen und in die Liste einfügen
const rotation = svg.createSVGTransform();
wheel.transform.baseVal.appendItem(rotation);

let angle = 0;
const tick = () => {
  angle = (angle + 2) % 360;
  rotation.setRotate(angle, 100, 100); // um den Mittelpunkt (100|100)
  requestAnimationFrame(tick);
};
requestAnimationFrame(tick);

Ereignisdelegation über eine Gruppe

const layer = document.querySelector("g#markers");

const onMarkerClick = (event) => {
  const marker = event.target.closest("circle");
  if (!marker) return;
  console.log("Marker angeklickt:", marker.dataset.city);
};

layer.addEventListener("click", onMarkerClick);
// Später wieder entfernen:
// layer.removeEventListener("click", onMarkerClick);

Marker angeklickt: Berlin

// Wichtig · Fallstricke

Namensraum beachten: document.createElement(\"g\") erzeugt ein unbekanntes HTML-Element (HTMLUnknownElement), kein SVGGElement. Es wird nicht dargestellt. Verwende immer createElementNS(\"http://www.w3.org/2000/svg\", \"g\").
<g> kennt keine Attribute x, y, width oder height. Zum Positionieren nimmst du transform=\"translate(...)\".
getBBox() liefert Nullwerte oder wirft in manchen Browsern einen Fehler, solange die Gruppe nicht im gerenderten Dokument hängt oder display: none hat. Die Transformation der Gruppe selbst fließt nicht ein, weil der Rahmen im lokalen Koordinatensystem berechnet wird.
Eine leere Gruppe hat keine Trefferfläche. Klicks landen nur auf den gezeichneten Kindern. Für eine klickbare Fläche legst du ein transparentes <rect> mit fill=\"transparent\" hinein.
Viele tief verschachtelte Gruppen mit Filtern oder opacity können das Rendern verlangsamen, weil der Browser dafür Zwischenebenen anlegt.
Die Schnittstelle wird von allen modernen Browsern unterstützt.

Siehe auch

SVGAElement SVGElement SVGSVGElement SVGSetElement SVGUseElement