SVGScriptElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGScriptElement extends SVGElement

Beschreibung

SVGScriptElement ist die DOM-Schnittstelle für das <script>-Element im SVG-Namensraum (http://www.w3.org/2000/svg). Sie erbt von SVGElement und übernimmt über das Mixin SVGURIReference die Eigenschaft href. Mit diesem Element bindet man JavaScript direkt in ein SVG-Dokument ein, etwa bei eigenständigen, interaktiven .svg-Dateien.

Die Schnittstelle hat nur wenige eigene Eigenschaften:

type (string): spiegelt das Attribut type wider, z. B. "text/javascript" oder "module".
crossOrigin (string | null): spiegelt das Attribut crossorigin wider ("anonymous" oder "use-credentials") und steuert CORS-Anfragen für externe Skripte.
href (SVGAnimatedString, schreibgeschützt): liefert die Adresse des externen Skripts. Den aktuellen Wert findet man in href.baseVal bzw. href.animVal.

Du nutzt diese Schnittstelle vor allem, wenn du innerhalb eines SVG-Dokuments Skripte dynamisch nachladen oder vorhandene <script>-Elemente untersuchen willst. Ein SVG-Skriptelement legst du immer mit document.createElementNS() und dem SVG-Namensraum an. document.createElement("script") erzeugt dagegen ein HTMLScriptElement.

Rückgabewert

Typ

SVGScriptElement

Beschreibung

Instanzen bekommst du über document.createElementNS("http://www.w3.org/2000/svg", "script") oder über DOM-Abfragen auf vorhandene SVG-<script>-Elemente.

Beispiele

SVG-Skriptelement erzeugen und externes Skript nachladen

const SVG_NS = 'http://www.w3.org/2000/svg';

// Das SVG in der Seite (oder das Wurzelelement einer .svg-Datei)
const svg = document.querySelector('svg') ?? document.body.appendChild(document.createElementNS(SVG_NS, 'svg'));

const script = document.createElementNS(SVG_NS, 'script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('href', '/js/diagramm-interaktion.js');
script.crossOrigin = 'anonymous';

script.addEventListener('load', () => console.log('Skript geladen:', script.href.baseVal));
script.addEventListener('error', () => console.error('Skript konnte nicht geladen werden'));

svg.appendChild(script);
console.log(script instanceof SVGScriptElement);

true Skript geladen: /js/diagramm-interaktion.js

Inline-Skript in ein SVG einfügen

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

const script = document.createElementNS(SVG_NS, 'script');
script.type = 'text/javascript';
// textContent statt innerHTML, damit der Code als Text eingefügt wird
script.textContent = "console.log('Hallo aus dem SVG-Skript');";

svg.appendChild(script); // wird beim Einfügen ausgeführt

Hallo aus dem SVG-Skript

Vorhandene SVG-Skripte untersuchen

const svgScripts = [...document.querySelectorAll('svg script')]
  .filter((el) => el instanceof SVGScriptElement);

for (const s of svgScripts) {
  console.log({
    typ: s.type || '(Standard)',
    quelle: s.href.baseVal || '(inline)',
    cors: s.crossOrigin
  });
}

{ typ: 'text/javascript', quelle: '/js/diagramm-interaktion.js', cors: 'anonymous' }

// Wichtig · Fallstricke

Sicherheit: SVG-Dateien können über <script> ausführbaren Code enthalten. Wenn Nutzer SVGs hochladen dürfen und diese direkt (inline oder als eigenes Dokument vom eigenen Origin) ausgeliefert werden, entsteht eine XSS-Lücke. Bereinige hochgeladene SVGs deshalb, zum Beispiel mit DOMPurify, liefere sie von einer separaten Domain aus oder setze einen strengen Content-Security-Policy-Header. Für SVG-Skripte gilt die CSP genauso wie für HTML-Skripte, etwa script-src und Nonces.

SVGs, die per <img> oder als CSS-background-image eingebunden sind, führen keine Skripte aus. Das passiert nur inline, per <object>/<iframe> oder beim direkten Aufruf der Datei.
Skripte, die über innerHTML eingefügt werden, werden nicht ausgeführt. Lege das Element deshalb mit createElementNS() an.
xlink:href ist veraltet. Verwende das einfache Attribut href. Ältere Safari-Versionen brauchen unter Umständen noch xlink:href.
href ist ein SVGAnimatedString und kein String. Lies den Wert über href.baseVal aus. Anders als bei HTMLScriptElement gibt es keine Eigenschaften async, defer oder src.
Die Schnittstelle wird in allen modernen Browsern unterstützt.

Siehe auch

MediaEncryptedEvent HTMLScriptElement SVGRectElement SVGSetElement SVGStopElement