script

Baseline Widely available *

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

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

一个 SVG 脚本元素等同于 HTML 中的 script 元素,因此这个位置是面向脚本的(例如,ECMAScript)。

任何定义在script元素中的函数拥有一个跨当前文档的全局范围。

使用上下文

类别
允许的内容任意元素或字符数据

示例

下面的代码片段演示了 SVG script标签的作用。在代码中,我们使用 JavaScript 改变 SVG <circle> 元素的半径。

html
<svg
  width="100%"
  height="100%"
  viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg">
  <script type="text/javascript">
    // <![CDATA[
    function change(evt) {
      var target = evt.target;
      var radius = target.getAttribute("r");

      if (radius == 15) {
        radius = 45;
      } else {
        radius = 15;
      }

      target.setAttribute("r", radius);
    }
    // ]]>
  </script>

  <circle cx="50" cy="50" r="45" fill="green" onclick="change(evt)" />
</svg>

示例输出:

属性

全局属性

专有属性

DOM 接口

该元素实现了 SVGScriptElement 接口。

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
script
async
Experimental
defer
Experimental
href
type
type='module'
Experimental
xlink:href
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Deprecated. Not for use in new websites.

参见