<script>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Das <script> SVG-Element ermöglicht es, Skripte zu einem SVG-Dokument hinzuzufügen.

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 bisher keine ECMAScript-Module (siehe unten für Details zur Browser-Kompatibilität).

Verwendungskontext

KategorienKeine
Erlaubter InhaltBeliebige Elemente oder Zeichendaten

Attribute

crossorigin

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

fetchpriority

Gibt einen Hinweis auf die relative Priorität beim Abrufen eines externen Skripts. 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 gesetzt ist. Dies ist der Standardwert.

href

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

type

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

xlink:href

Die URL zu dem zu ladenden Skript. Wertetyp: <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

Specification
Scalable Vector Graphics (SVG) 2
# ScriptElement

Browser-Kompatibilität

Siehe auch