<script>

SVG 的script元素允许向 SVG 文档添加脚本。

注意:虽然 SVG 的script元素等同于 HTML 的<script>元素,但它有一些差异,例如它使用href属性而不是src,并且目前不支持 ECMAScript 模块(有关详细信息,请参阅下面的浏览器兼容性)

示例

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>

属性

crossorigin

此属性定义了CORS 设置,如同为 HTML 的<script>元素定义的那样。值类型<string>默认值?可动画

href

要加载的脚本的URL值类型<URL>默认值可动画

type

此属性定义要使用的脚本语言的类型。值类型<string>默认值application/ecmascript可动画

xlink:href 已弃用

要加载的脚本的URL值类型<URL>默认值可动画

使用上下文

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

规范

规范
可缩放矢量图形 (SVG) 2
# ScriptElement

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅