<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.
Verwendungskontext
| Kategorien | Keine |
|---|---|
| Erlaubter Inhalt | Beliebige Elemente oder Zeichendaten |
Attribute
async-
Wenn das Attribut
asyncvorhanden ist, wird das externe Skript parallel zum Parsen geladen und ausgeführt, sobald es verfügbar ist. Dies entspricht dem Attributasyncdes 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
defervorhanden ist, wird das externe Skript ausgeführt, nachdem das Dokument geparst wurde, aber bevor das EreignisDOMContentLoadedausgelöst wird. Dies entspricht dem Attributdeferdes 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
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
- Attribut
fetchpriority script-Element in HTML