html svg 獲取ID值在rect,SVG进阶 | SVG和Javascript脚本

我们可以通过javascript来修改SVG元素，使它产生动画效果，或者在SVG图像上监听鼠标事件等等。

当SVG嵌入到HTML页面的时候，你可以使用javascript来操作SVG元素，就像操作其他HTML元素一样。

SVG脚本的例子

下面是一个简单的SVG脚本的例子，它在按钮被点击的时候，动态修改SVG矩形的尺寸。

style="stroke:#000000; fill:none;"/>

οnclick="changeDimensions()"> 修改SVG矩形的尺寸

function changeDimensions() {

document.getElementById("rect1").setAttribute("width", "100");

}

修改SVG矩形的尺寸

重　置

点击上面的按钮查看效果。

通过ID获取SVG的引用

我们可以使用document.getElementById()函数来获取一个SVG元素的引用。

var svgElement = document.getElementById("rect1");

这个例子获取ID为rect1的SVG图形的引用，ID是SVG图形中的id属性。

修改属性值

在你获取了一个SVG元素的引用之后，你就可以使用setAttribute()函数来修改它的属性值。例如：

var svgElement = document.getElementById("rect1");

s