The SVG script element allows to add scripts to an SVG document.
<script>
Example
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>
Attributes
crossorigin-
This attribute defines CORS settings as define for the HTML
<script>element. Value type: <string>; Default value:?; Animatable: yes href-
The URL to the script to load. Value type: <URL> ; Default value: none; Animatable: no
type-
This attribute defines type of the script language to use. Value type: <string>; Default value:
application/ecmascript; Animatable: no -
xlink:hrefDeprecated -
The URL to the script to load. Value type: <URL> ; Default value: none; Animatable: no
Usage context
| Categories | None |
|---|---|
| Permitted content | Any elements or character data |
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # ScriptElement |
Browser compatibility
| Desktop | Mobile | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | |
script |
1 | 12 | 1.5 | 9 | 3 | 18 | 4 | 10.1 | 2 | 1.0 | 3 |
async |
No | No | 117 | No | No | No | 117 | No | No | No | No |
defer |
No | No | 117 | No | No | No | 117 | No | No | No | No |
href |
50 | 12 | 51 | 37 | 12.1 | 50 | 51 | 37 | 12.2 | 5.0 | 50 |
type |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 |
xlink_href |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 |
See also
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/script