SVGDefsElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGDefsElement extends SVGGraphicsElement

Beschreibung

SVGDefsElement ist die DOM-Schnittstelle für das Element <defs>. In einem <defs>-Block stehen grafische Objekte, die erst später gezeichnet werden: Farbverläufe (<linearGradient>, <radialGradient>), Muster (<pattern>), Filter, Masken, Beschneidungspfade (<clipPath>), Markierungen (<marker>) und Symbole oder Formen, die über <use> wiederverwendet werden.

Das Element selbst wird nie dargestellt. Seine Kindelemente wirken erst, wenn man sie per ID anspricht, etwa mit fill="url(#verlauf)", filter="url(#schatten)" oder <use href="#icon">.

Die Schnittstelle bringt keine eigenen Eigenschaften oder Methoden mit. Sie erbt alles von SVGGraphicsElement, SVGElement, Element, Node und EventTarget. In der Praxis braucht man sie vor allem, um mit instanceof den Typ zu prüfen und um zur Laufzeit Definitionen per DOM-Methoden anzulegen, etwa dynamisch erzeugte Verläufe oder Filter.

Rückgabewert

Typ

SVGDefsElement

Beschreibung

Man erhält eine Instanz über document.createElementNS("http://www.w3.org/2000/svg", "defs") oder über DOM-Abfragen wie querySelector("defs").

Beispiele

defs-Element erzeugen und Typ prüfen

const SVG_NS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(SVG_NS, "svg");
const defs = document.createElementNS(SVG_NS, "defs");
svg.append(defs);
document.body.append(svg);

console.log(defs instanceof SVGDefsElement);
console.log(defs instanceof SVGGraphicsElement);
console.log(defs.tagName);

true true defs

Farbverlauf dynamisch in defs anlegen und verwenden

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

// defs holen oder neu anlegen
const defs = svg.querySelector("defs") ?? svg.insertBefore(
  document.createElementNS(SVG_NS, "defs"), svg.firstChild
);

const gradient = document.createElementNS(SVG_NS, "linearGradient");
gradient.id = "verlauf";
[["0%", "#4f46e5"], ["100%", "#06b6d4"]].forEach(([offset, color]) => {
  const stop = document.createElementNS(SVG_NS, "stop");
  stop.setAttribute("offset", offset);
  stop.setAttribute("stop-color", color);
  gradient.append(stop);
});
defs.append(gradient);

const rect = document.createElementNS(SVG_NS, "rect");
rect.setAttribute("width", "200");
rect.setAttribute("height", "100");
rect.setAttribute("fill", "url(#verlauf)");
svg.append(rect);

document.body.append(svg);
console.log(defs.children.length);

1

Icon aus defs mehrfach per <use> einsetzen

document.body.insertAdjacentHTML("beforeend", `
  <svg id="icons" viewBox="0 0 120 40">
    <defs>
      <circle id="punkt" r="10" fill="tomato" />
    </defs>
  </svg>`);

const SVG_NS = "http://www.w3.org/2000/svg";
const svg = document.getElementById("icons");
const defs = svg.querySelector("defs");

[20, 60, 100].forEach((x) => {
  const use = document.createElementNS(SVG_NS, "use");
  use.setAttribute("href", "#punkt");
  use.setAttribute("x", x);
  use.setAttribute("y", 20);
  svg.append(use);
});

// Die Definition ist im DOM, wird aber nicht direkt gezeichnet
console.log(defs.getBBox().width);

// Wichtig · Fallstricke

Namensraum beachten: document.createElement("defs") erzeugt nur ein HTMLUnknownElement. Richtig ist createElementNS("http://www.w3.org/2000/svg", "defs").
IDs sind global: Stehen mehrere Inline-SVGs auf einer Seite, gelten ihre IDs für das ganze Dokument. Doppelte IDs wie #verlauf führen dazu, dass der falsche Verlauf verwendet wird. Vergib deshalb eindeutige IDs, zum Beispiel mit einem Präfix oder mit crypto.randomUUID().
Nicht gezeichnet heißt nicht wirkungslos: Styles und Transformationen am <defs>-Element werden für den Inhalt zwar nicht direkt gerendert. Über <use> geklonte Inhalte können aber je nach Browser CSS-Eigenschaften unterschiedlich erben. Setze Stile daher besser direkt am Zielelement oder am <use>.
<defs> ist nicht Pflicht: Verläufe, Filter und ähnliche Elemente funktionieren auch außerhalb von <defs>, weil sie ohnehin nicht direkt gezeichnet werden. <defs> macht den Code aber klarer.
Veraltetes xlink:href ist durch href ersetzt. Moderne Browser unterstützen href an <use> und an Verläufen.
Kompatibilität: Wird von allen modernen Browsern unterstützt. In älteren Spezifikationen hat SVGDefsElement von SVGElement geerbt, heute von SVGGraphicsElement.

Siehe auch

SVGDescElement SVGRectElement SVGSetElement SVGTextElement SVGAElement