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.

Das <script>-Element SVG ermöglicht das Hinzufügen von Skripten zu einem SVG-Dokument.

Hinweis: Während das script-Element von SVG dem HTML-<script>-Element entspricht, gibt es einige Unterschiede, wie zum Beispiel die Verwendung des href-Attributs anstelle von src und es unterstützt bislang keine ECMAScript-Module (siehe unten für Browser-Kompatibilität).

Verwendungskontext

KategorienKeine
Erlaubter InhaltBeliebige Elemente oder Zeichendaten

Attribute

async

Wenn das async-Attribut vorhanden ist, wird das externe Skript parallel zum Parsen abgerufen und ausgewertet, sobald es verfügbar ist. Dies entspricht dem async-Attribut im HTML-<script>-Element. Werttyp: boolean; Standardwert: none; Animierbar: nein

crossorigin

Dieses Attribut definiert CORS-Einstellungen wie im HTML-<script>-Element. Werttyp: [ anonymous | use-credentials ]?; Standardwert: ?; Animierbar: ja

defer

Wenn das defer-Attribut vorhanden ist, wird das externe Skript nach dem Parsen des Dokuments, aber vor dem Auslösen von DOMContentLoaded ausgeführt. Dies entspricht dem defer-Attribut im HTML-<script>-Element. Werttyp: boolean; Standardwert: none; Animierbar: nein

fetchpriority

Gibt einen Hinweis auf die relative Priorität an, die beim Abrufen eines externen Skripts verwendet werden soll. Erlaubte Werte:

high

Ruft das externe Skript mit hoher Priorität im Vergleich zu anderen externen Skripten ab.

low

Ruft das externe Skript mit niedriger Priorität im Vergleich zu anderen externen Skripten ab.

auto

Setzt keine Präferenz für die Abrufpriorität. Wird verwendet, wenn kein Wert oder ein ungültiger Wert festgelegt ist. Dies ist der Standard.

href

Die URL zu dem zu ladenden Skript. Werttyp: <URL>; Standardwert: none; Animierbar: nein

type

Dieses Attribut definiert den Typ der zu verwendenden Skriptsprache. Werttyp: **``**; Standardwert: application/ecmascript; Animierbar: nein

xlink:href

Die URL zu dem zu ladenden Skript. Werttyp: <URL>; Standardwert: none; Animierbar: nein

DOM-Schnittstelle

Dieses Element implementiert die SVGScriptElement-Schnittstelle.

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