Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

<script>

Baseline
Weitgehend verfügbar
*

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Mit dem <script>-Element von SVG können Sie einem SVG-Dokument Skripte hinzufügen.

Hinweis: Das script-Element von SVG entspricht zwar dem HTML-Element <script>, unterscheidet sich aber in einigen Punkten: Es verwendet beispielsweise das Attribut href statt src und unterstützt bislang keine ECMAScript-Module. Weitere Informationen finden Sie unten unter Browser-Kompatibilität.

Verwendungskontext

KategorienKeine
Erlaubter InhaltBeliebige Elemente oder Zeichendaten

Attribute

async

Wenn das Attribut async vorhanden ist, wird das externe Skript parallel zum Parsen geladen und ausgeführt, sobald es verfügbar ist. Dies entspricht dem Attribut async des HTML-Elements <script>. Wertetyp: boolean; Standardwert: keiner; Animierbar: nein

crossorigin

Dieses Attribut legt die CORS-Einstellungen fest, wie sie für das HTML-Element <script> definiert sind. Wertetyp: [ anonymous | use-credentials ]?; Standardwert: ?; Animierbar: ja

defer

Wenn das Attribut defer vorhanden ist, wird das externe Skript ausgeführt, nachdem das Dokument geparst wurde, aber bevor das Ereignis DOMContentLoaded ausgelöst wird. Dies entspricht dem Attribut defer des HTML-Elements <script>. Wertetyp: boolean; Standardwert: keiner; Animierbar: nein

fetchpriority

Gibt einen Hinweis auf die relative Priorität beim Laden eines externen Skripts. Zulässige Werte:

high

Lädt das externe Skript mit hoher Priorität im Vergleich zu anderen externen Skripten.

low

Lädt das externe Skript mit niedriger Priorität im Vergleich zu anderen externen Skripten.

auto

Legt keine bevorzugte Ladepriorität fest. Dieser Wert wird verwendet, wenn kein Wert oder ein ungültiger Wert angegeben ist. Dies ist der Standardwert.

href

Die URL des zu ladenden Skripts. Wertetyp: <URL>; Standardwert: keiner; Animierbar: nein

type

Dieses Attribut legt den Typ der zu verwendenden Skriptsprache fest. Wertetyp: **``**; Standardwert: application/ecmascript; Animierbar: nein

xlink:href

Die URL des zu ladenden Skripts. Wertetyp: <URL>; Standardwert: keiner; Animierbar: nein

DOM-Schnittstelle

Dieses Element implementiert die Schnittstelle SVGScriptElement.

Beispiel

html
Click the circle to change colors.
<svg
  viewBox="0 0 10 10"
  height="120px"
  width="120px"
  xmlns="http://www.w3.org/2000/svg">
  <circle cx="5" cy="5" r="4" />

  <script>
    // <![CDATA[
    function getColor() {
      const R = Math.round(Math.random() * 255)
        .toString(16)
        .padStart(2, "0");

      const G = Math.round(Math.random() * 255)
        .toString(16)
        .padStart(2, "0");

      const B = Math.round(Math.random() * 255)
        .toString(16)
        .padStart(2, "0");

      return `#${R}${G}${B}`;
    }

    document.querySelector("circle").addEventListener("click", (e) => {
      e.target.style.fill = getColor();
    });
    // ]]>
  </script>
</svg>

Spezifikationen

Spezifikation
Scalable Vector Graphics (SVG) 2
# ScriptElement

Browser-Kompatibilität

Siehe auch