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 Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 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 in SVG dem HTML-<script>-Element entspricht, gibt es einige Unterschiede, wie z.B. die Verwendung des href-Attributs anstelle von src und die fehlende Unterstützung für ECMAScript-Module bisher (siehe unten für Details zur Browser-Kompatibilität).

Verwendungskontext

KategorienKeine
Erlaubter InhaltBeliebige Elemente oder Zeichendaten

Attribute

crossorigin

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

fetchpriority Experimentell Nicht standardisiert

Bietet einen Hinweis auf die relative Priorität beim Laden eines externen Skripts. Erlaubte 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 Präferenz für die Ladepriorität fest. Wird verwendet, wenn kein Wert oder ein ungültiger Wert gesetzt ist. Dies ist der Standardwert.

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 Veraltet

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

Specification
Scalable Vector Graphics (SVG) 2
# ScriptElement

Browser-Kompatibilität

Siehe auch