JS操作SVG

可缩放矢量图形（SVG）是一种基于XML的标记语言，用于描述二维矢量图形。与传统的像素图像不同，SVG图像在放大时不会失真，这使得它非常适合用于网页图形设计。在本文中，我们将探讨如何使用JavaScript与SVG交互，实现动态的图形效果。

SVG基础
SVG图像可以直接嵌入HTML文档中，成为DOM的一部分，这样就可以使用JavaScript和CSS来操作它们。例如，一个简单的SVG圆形可以通过以下代码嵌入到HTML中：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

在上面的代码中，<circle>元素用于绘制一个圆形，cx和cy属性定义了圆心的坐标，r属性定义了圆的半径，stroke和fill属性分别定义了圆的边框颜色和填充颜色。

JavaScript操作SVG

获取SVG元素

如果SVG代码直接写在HTML中，我们可以像操作普通DOM元素一样操作SVG元素。例如，获取并修改上面圆形的半径：

let circle = document.querySelector('circle');
circle.setAttribute('r', '50');

动态创建SVG元素

我们也可以使用JavaScript动态创建SVG元素。以下是创建一个SVG矩形的例子：

let svgNS = "http://www.w3.org/2000/svg";
let rect = document.createElementNS(svgNS, 'rect');
rect.setAttribute('x', '10');
rect.setAttribute('y', '10');
rect.setAttribute('width', '30');
rect.setAttribute('height', '30');
rect.setAttribute('fill', 'blue');
document.querySelector('svg').appendChild(rect);

在上面的代码中，createElementNS函数用于创建属于SVG命名空间的元素。我们设置了矩形的位置、大小和填充颜色，然后将其添加到SVG中。

修改SVG属性

在SVG中，每个元素都有一系列属性，这些属性定义了元素的外观和行为。使用JavaScript，我们可以轻松地更改这些属性。例如，如果我们想要更改一个矩形的宽度，我们可以这样做：

// 获取SVG矩形元素
var rect = document.getElementById('myRect');
// 设置新的宽度属性
rect.setAttribute('width', '200');

在上面的代码中，我们首先通过getElementById方法获取了矩形元素，然后使用setAttribute方法来设置新的宽度值。

修改SVG元素的样式

SVG元素的样式可以通过CSS来控制。我们可以使用JavaScript来动态更改这些样式。例如，如果我们想要更改一个圆形的填充颜色，我们可以这样做：

// 获取SVG圆形元素
var circle = document.getElementById('myCircle');
// 设置新的填充颜色
circle.style.fill = 'blue';

在这个例子中，我们通过style属性直接设置了圆形的fill属性，从而改变了它的填充颜色。

删除SVG标签

有时候我们可能需要从SVG中删除某个元素。这可以通过JavaScript的removeChild或remove方法来实现。例如，如果我们想要删除一个线条元素，我们可以这样做：

// 获取SVG线条元素
var line = document.getElementById('myLine');
// 从父元素中删除线条
line.parentNode.removeChild(line);

在上面的代码中，我们首先获取了线条元素，然后使用removeChild方法将其从父元素中移除。

监听和响应事件

SVG元素也可以响应事件。例如，我们可以为圆形添加一个点击事件：

circle.addEventListener('click', function() {
  alert('圆形被点击了！');
});