SVG 脚本

2025 年 3 月 17 日 | 阅读 1 分钟

使用 JavaScript，可以编写 SVG 脚本。通过脚本，您可以修改 SVG 元素，对其进行动画处理或侦听形状上的鼠标事件。

当 SVG 嵌入在 HTML 页面中时，您可以使用 JavaScript 处理 SVG 元素。

示例

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="150">

<rect id="rect1" x="20" y="20" width="70" height="80"
       style="stroke: black; stroke-width: 2; fill:purple; fill-opacity: .5;"/>
</svg>
<input id="button1" type="button" value="Change Dimensions"
            onclick="changeDimensions()"/>

<script>
    function changeDimensions() {
        document.getElementById("rect1").setAttribute("width", "120");
        document.getElementById("rect1").setAttribute("height", "100");
    }
</script>
</body>
</html>

立即测试

说明

使用 document.getElementById() 函数，您可以获取对 SVG 形状的引用。
setAttribute() 函数用于更改属性的值。

下一节事件监听器

SVG 脚本

示例

说明

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

SVG 教程

SVG 效果

SVG 渐变

SVG 动画

SVG 滤镜

转换

面试题

SVG 脚本

示例

说明

相关帖子

SVG 文本

SVG 裁剪路径

SVG 基本形状

SVG 模式

SVG 工具

SVG symbol 元素

事件监听器

SVG g 元素

SVG 栅格图像

SVG 描边

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器