<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 das Hinzufügen von Skripten zu einem SVG-Dokument.

Hinweis: Obwohl das script-Element von SVG dem <script>-Element von HTML entspricht, gibt es einige Unterschiede. Zum Beispiel verwendet es das href-Attribut anstelle von src und unterstützt derzeit keine ECMAScript-Module (siehe Browser-Kompatibilität unten für Details).

Nutzungskontext

KategorienKeine
Erlaubter InhaltBeliebige Elemente oder Zeichendaten

Attribute

crossorigin

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

fetchpriority

Gibt einen Hinweis auf die relative Priorität, 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. Dieser Wert wird verwendet, wenn kein Wert oder ein ungültiger Wert gesetzt ist. Dies ist der Standard.

href

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

type

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

xlink:href

Die URL des zu ladenden Skripts. 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