语言►SVG

SVG中的script元素

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/01/01/SVG%E4%B8%AD%E7%9A%84script%E5%85%83%E7%B4%A0/

摘要

本文主要讲述了：

  1. 作用
  2. attribute

正文

作用

在 SVG 中嵌入 JavaScript 脚本

示例：

1
2
3
4
5
6
7
8
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <script>
        window.addEventListener("DOMContentLoaded", function() {
            document.getElementById("foo").style.fill = "#f00";
        });
    </script>
    <rect id="foo" x="10" y="10" width="100" height="100"/>
</svg>

attribute

href

脚本文件的 URL

示例：

learn_svg/index.svg

1
2
3
4
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <script href="./index.js"/>
    <rect id="foo" x="10" y="10" width="100" height="100"/>
</svg>

learn_svg/index.js

1
2
3
window.addEventListener('DOMContentLoaded', function () {
  document.getElementById('foo').style.fill = '#f00';
});

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/01/01/SVG%E4%B8%AD%E7%9A%84script%E5%85%83%E7%B4%A0/

本文对你有帮助？请支持我

支付宝
微信