JavaScript操作SVG需掌握DOM获取、动态创建、事件绑定与动画。1. 用getElementById或querySelector选中SVG元素，通过setAttribute修改fill、stroke等属性；2. 动态创建时必须使用createElementNS('http://www.w3.org/2000/svg', 'rect')指定命名空间；3. 绑定click、mouseover等事件实现交互；4. 利用requestAnimationFrame逐帧更新cx、cy等属性实现动画，结合CSS transition更流畅；5. 注意属性写法如stroke-width在JS中应写为strokeWidth或用setAttribute设置。
JavaScript 操作 SVG 是实现动态矢量图形的核心方式，尤其适用于数据可视化、交互式图表和动画效果。SVG（Scalable Vector Graphics）基于 XML 描述图形，能无损缩放，结合 JavaScript 可以实现元素的创建、修改、监听和动画控制。
获取与操作 SVG 元素
在网页中嵌入 SVG 后，可以通过标准 DOM 方法获取并操作其内部元素：
- 使用 document.getElementById() 或 querySelector() 选取 SVG 节点
- 直接修改属性，如 setAttribute() 设置 fill、stroke、transform 等
- 通过 style 属性控制 CSS 样式
const circle = document.getElementById('myCircle');
circle.setAttribute('fill', 'red');
circle.style.strokeWidth = '3px';
动态创建 SVG 图形
使用 document.createElementNS() 创建 SVG 元素，注意命名空间为 "http://www.w3.org/2000/svg"。
- 必须指定正确的命名空间，否则图形不会渲染
- 设置基本属性如坐标、大小、颜色后，再添加到 SVG 容器中
const svg = document.getElementById('mySvg');
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('x', 50);
rect.setAttribute('y', 50);
rect.setAttribute('width', 100);
rect.setAttribute('height', 60);
rect.setAttribute('fill', 'blue');
svg.appendChild(rect);
事件绑定与交互响应
SVG 元素支持鼠标和触摸事件，可实现点击、悬停等交互。
立即学习“Java免费学习笔记（深入）”；
- 使用 addEventListener() 绑定 click、mouseover、mouseout 等事件
- 常用于实现按钮、可点击图表项或工具提示
circle.addEventListener('click', function() {
this.setAttribute('fill', this.getAttribute('fill') === 'red' ? 'green' : 'red');
});
动画与过渡效果
可通过 JavaScript 控制属性变化实现动画，也可结合 CSS transition 提升流畅性。
- 使用 setInterval 或 requestAnimationFrame 实现帧动画
- 修改 cx、cy、r、d 等属性制造移动或变形效果
- CSS 中定义 transition 可使颜色、位置变化更平滑
let x = 0;
const animate = () => {
x += 2;
circle.setAttribute('cx', x);
if (x < 200) requestAnimationFrame(animate);
};
animate();
基本上就这些。掌握这些基础方法后，可以结合 D3.js 等库构建复杂可视化项目，但原生 JavaScript 操作 SVG 依然是理解底层机制的关键。不复杂但容易忽略的是命名空间和属性写法，比如 stroke-width 在 JS 中要写成 strokeWidth 或用 setAttribute 才有效。
