SVGStyleElement.type — Eigenschaft · JavaScript-Referenz

Signatur

SVGStyleElement.type

Beschreibung

Die Eigenschaft type des Interfaces SVGStyleElement spiegelt das Inhaltsattribut type eines <style>-Elements innerhalb von SVG wider. Sie gibt den MIME-Typ der Stilsprache an. In der Praxis wird nur "text/css" unterstützt.

Die Eigenschaft ist lesend und schreibend. Wenn Sie ihr einen Wert zuweisen, ändert sich das Attribut type im DOM entsprechend. Gibt der Autor kein Attribut an, gilt CSS als Standard-Stilsprache. Was dann beim Auslesen zurückkommt, kann je nach Implementierung ein leerer String oder "text/css" sein.

Nützlich ist type vor allem bei Werkzeugen, die SVG-Dokumente untersuchen oder bereinigen, etwa Optimierer und Editoren. Sie können damit prüfen, ob ein Stilblock wirklich CSS enthält, bevor sie ihn verarbeiten. Ein anderer Anwendungsfall: Sie setzen den Typ ausdrücklich, wenn Sie <style>-Elemente dynamisch per document.createElementNS() erzeugen.

Rückgabewert

Typ

string

Beschreibung

Der Wert des Attributs type, typischerweise "text/css". Fehlt das Attribut, ist das Ergebnis je nach Browser ein leerer String oder "text/css".

Beispiele

Typ eines bestehenden SVG-Stylesheets auslesen

// HTML: <svg id="logo"><style type="text/css">circle { fill: teal; }</style><circle r="10" cx="10" cy="10"/></svg>
const styleEl = document.querySelector('#logo style');
console.log(styleEl instanceof SVGStyleElement);
console.log(styleEl.type);

true text/css

Style-Element dynamisch erzeugen und Typ setzen

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(SVG_NS, 'svg');
const style = document.createElementNS(SVG_NS, 'style');

style.type = 'text/css';
style.textContent = 'rect { fill: orange; }';
svg.append(style);
document.body.append(svg);

console.log(style.getAttribute('type'));

text/css

Nur CSS-Stilblöcke eines SVG-Dokuments verarbeiten

const collectCss = (svgRoot) =>
  [...svgRoot.querySelectorAll('style')]
    .filter((el) => {
      const t = el.type.trim().toLowerCase();
      // Fehlendes Attribut bedeutet CSS
      return t === '' || t === 'text/css';
    })
    .map((el) => el.textContent)
    .join('\n');

const svgRoot = document.querySelector('svg');
console.log(collectCss(svgRoot));

circle { fill: teal; }

// Wichtig · Fallstricke

Uneinheitlicher Standardwert: Ohne Attribut type liefern manche Browser einen leeren String, ältere Implementierungen dagegen "text/css". Behandeln Sie deshalb in Vergleichen beide Werte als CSS.
Keine andere Stilsprache: Setzen Sie einen anderen Wert als "text/css", etwa "text/less", wenden Browser den Inhalt in der Regel nicht an. Das Element bleibt dann wirkungslos.
Keine Prüfung beim Setzen: Beim Zuweisen findet keine Validierung statt, und es wird keine Ausnahme ausgelöst. Nach SVG 1.1 durfte bei schreibgeschützten Attributen noch ein DOMException auftreten, SVG 2 kennt dieses Verhalten nicht mehr.
Namensraum beachten: Die Eigenschaft gibt es nur auf <style>-Elementen im SVG-Namensraum. Erzeugen Sie das Element mit document.createElement('style'), erhalten Sie ein HTMLStyleElement. Dort ist type veraltet.
Kompatibilität: Alle aktuellen Browser unterstützen die Eigenschaft (Chrome, Edge, Firefox, Safari).

Siehe auch

SVGStyleElement SVGStyleElement.media SVGStyleElement.title SVGStyleElement.sheet HTMLStyleElement Document.createElementNS() CSSPseudoElement.type