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.

一个 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 接口。

浏览器兼容性

BCD tables only load in the browser

参见