JavaScript操作SVG完全指南

一、SVG与DOM基础

SVG（Scalable Vector Graphics）作为W3C推荐的矢量图形标准，在现代Web开发中扮演着重要角色。与传统的Canvas不同，SVG是基于XML的标记语言，这意味着我们可以像操作HTML元素一样，通过DOM API来操作SVG元素。

javascript // 创建一个简单的SVG元素 const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("width", "300"); svg.setAttribute("height", "200"); document.body.appendChild(svg);

关键点注意：创建SVG元素时必须使用document.createElementNS()方法而非普通的createElement，因为SVG存在于特定的XML命名空间中。

二、SVG元素创建与操作

1. 基本图形元素

javascript
// 创建圆形
const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", "50");
circle.setAttribute("cy", "50");
circle.setAttribute("r", "40");
circle.setAttribute("fill", "red");
svg.appendChild(circle);

// 创建矩形
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", "100");
rect.setAttribute("y", "10");
rect.setAttribute("width", "80");
rect.setAttribute("height", "80");
rect.setAttribute("fill", "blue");
svg.appendChild(rect);

2. 路径与复杂图形

对于更复杂的图形，可以使用<path>元素：

javascript const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); path.setAttribute("d", "M10 10 L90 10 L50 90 Z"); path.setAttribute("fill", "green"); svg.appendChild(path);

三、SVG属性动态修改

JavaScript可以动态修改SVG元素的属性，实现交互效果：

javascript
// 修改圆形颜色
circle.addEventListener("click", () => {
circle.setAttribute("fill", getRandomColor());
});

function getRandomColor() {
return #${Math.floor(Math.random()*16777215).toString(16)};
}

动画实现方式

1. CSS动画：css
   @keyframes rotate {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
   }

.rotating {
animation: rotate 2s linear infinite;
transform-origin: center;
}
javascript
rect.classList.add("rotating");

1. JavaScript动画：
   javascript let angle = 0; function animate() { angle = (angle + 1) % 360; rect.setAttribute("transform", `rotate(${angle}, 140, 50)`); requestAnimationFrame(animate); } animate();

四、高级SVG操作技巧

1. 图形分组与复用

javascript
// 创建组
const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
group.setAttribute("transform", "translate(50, 50)");
svg.appendChild(group);

// 向组中添加元素
const smallCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
smallCircle.setAttribute("cx", "0");
smallCircle.setAttribute("cy", "0");
smallCircle.setAttribute("r", "20");
smallCircle.setAttribute("fill", "yellow");
group.appendChild(smallCircle);

2. 使用和复用元素

javascript
// 定义可复用元素
const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
svg.insertBefore(defs, svg.firstChild);

const star = document.createElementNS("http://www.w3.org/2000/svg", "path");
star.setAttribute("id", "star");
star.setAttribute("d", "M50,5 L61,35 L92,35 L68,55 L79,85 L50,70 L21,85 L32,55 L8,35 L39,35 Z");
defs.appendChild(star);

// 复用元素
for (let i = 0; i < 5; i++) {
const use = document.createElementNS("http://www.w3.org/2000/svg", "use");
use.setAttribute("href", "#star");
use.setAttribute("x", i * 60);
use.setAttribute("y", "100");
use.setAttribute("fill", ["red", "blue", "green", "purple", "orange"][i]);
svg.appendChild(use);
}

五、SVG与用户交互

1. 事件处理

javascript
circle.addEventListener("mouseenter", () => {
circle.setAttribute("r", "50");
});

circle.addEventListener("mouseleave", () => {
circle.setAttribute("r", "40");
});

2. 拖拽实现

javascript
let isDragging = false;

circle.addEventListener("mousedown", (e) => {
isDragging = true;
});

document.addEventListener("mousemove", (e) => {
if (!isDragging) return;

const svgRect = svg.getBoundingClientRect();
const x = e.clientX - svgRect.left;
const y = e.clientY - svgRect.top;

circle.setAttribute("cx", x);
circle.setAttribute("cy", y);
});

document.addEventListener("mouseup", () => {
isDragging = false;
});

六、性能优化建议

1. 尽量减少DOM操作次数，可以在内存中构建好SVG结构后再一次性添加到DOM中
2. 对于复杂动画，考虑使用CSS变换而非JavaScript连续修改属性
3. 合理使用<use>元素复用图形，减少SVG文件大小
4. 对于大量相似图形，考虑使用Canvas绘制或在服务器端预渲染

通过掌握这些SVG操作技术，开发者可以创建出丰富多样的矢量图形应用，从简单的图标到复杂的数据可视化，SVG都能提供强大的支持。