SVG（Scalable Vector Graphics）是一种使用XML描述2D图形的格式，常用于网页中的矢量图形。在前端开发中，我们经常需要通过JavaScript对SVG元素进行操作和控制。本文将介绍如何用JavaScript访问SVG元素，包括获取SVG元素、修改SVG属性和事件处理。
获取SVG元素
要获取SVG元素，首先需要在HTML文档中嵌入SVG代码，如下所示：
---- ----------- ------------- ------- ------- ------- ------ ---------- -- ------
上述代码定义了一个宽高均为100像素的SVG画布，并在画布上绘制了一个半径为40像素、填充颜色为红色的圆形。要获取这个圆形元素，可以使用document.querySelector()方法，传入CSS选择器即可：
----- ------ - ---------------------------------
上述代码会返回一个表示这个圆形元素的对象，你可以通过该对象访问或修改SVG元素的属性。
修改SVG属性
要修改SVG元素的属性，可以直接修改SVG元素对象的属性值。以上面的例子为例，如果要将圆形的填充颜色修改为蓝色，可以这样写：
--------------------------- --------
上述代码将圆形元素的fill属性值修改为blue，即将填充颜色改为蓝色。
除了使用setAttribute()方法，还可以直接访问SVG元素对象的属性进行修改。以圆形元素的fill属性为例，以下两种写法等价：
--------------------------- ------- ----------- - ------
这里需要注意的是，不同类型的SVG元素具有不同的属性，因此在修改SVG元素属性时，需要先了解该元素的属性定义。
事件处理
与HTML元素类似，SVG元素也支持各种事件，如click、mouseenter、mouseleave等。要对SVG元素进行事件处理，可以使用addEventListener()方法监听指定事件，并在回调函数中实现相应的逻辑。例如，以下代码会在点击圆形元素时，将其填充颜色修改为黄色：
-------------------------------- ---------- - ------------------------- ---------- ---
上述代码中，回调函数内部的this关键字指向触发该事件的SVG元素对象。
总结
本文介绍了如何用JavaScript访问SVG元素，包括获取SVG元素、修改SVG属性和事件处理。了解和掌握这些技巧，可以方便地在前端开发中操作SVG图形，实现更加丰富的交互效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/12849