如何用JavaScript访问SVG元素-JavaScript中文网-JavaScript教程资源分享门户

SVG（Scalable Vector Graphics）是一种使用XML描述2D图形的格式，常用于网页中的矢量图形。在前端开发中，我们经常需要通过JavaScript对SVG元素进行操作和控制。本文将介绍如何用JavaScript访问SVG元素，包括获取SVG元素、修改SVG属性和事件处理。

获取SVG元素

要获取SVG元素，首先需要在HTML文档中嵌入SVG代码，如下所示：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

上述代码定义了一个宽高均为100像素的SVG画布，并在画布上绘制了一个半径为40像素、填充颜色为红色的圆形。要获取这个圆形元素，可以使用document.querySelector()方法，传入CSS选择器即可：

const circle = document.querySelector("circle");

上述代码会返回一个表示这个圆形元素的对象，你可以通过该对象访问或修改SVG元素的属性。

修改SVG属性

要修改SVG元素的属性，可以直接修改SVG元素对象的属性值。以上面的例子为例，如果要将圆形的填充颜色修改为蓝色，可以这样写：

circle.setAttribute("fill", "blue");

上述代码将圆形元素的fill属性值修改为blue，即将填充颜色改为蓝色。

除了使用setAttribute()方法，还可以直接访问SVG元素对象的属性进行修改。以圆形元素的fill属性为例，以下两种写法等价：

circle.setAttribute("fill", "red");
circle.fill = "red";

这里需要注意的是，不同类型的SVG元素具有不同的属性，因此在修改SVG元素属性时，需要先了解该元素的属性定义。

事件处理

与HTML元素类似，SVG元素也支持各种事件，如click、mouseenter、mouseleave等。要对SVG元素进行事件处理，可以使用addEventListener()方法监听指定事件，并在回调函数中实现相应的逻辑。例如，以下代码会在点击圆形元素时，将其填充颜色修改为黄色：

circle.addEventListener("click", function() {
  this.setAttribute("fill", "yellow");
});

上述代码中，回调函数内部的this关键字指向触发该事件的SVG元素对象。

总结

本文介绍了如何用JavaScript访问SVG元素，包括获取SVG元素、修改SVG属性和事件处理。了解和掌握这些技巧，可以方便地在前端开发中操作SVG图形，实现更加丰富的交互效果。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/12849