使用JavaScript动态生成SVG需通过createElementNS创建元素并添加到DOM，示例中先构建400x300画布，再绘制圆形、矩形和线条，结合数据数组生成柱状图，每个柱子根据数值设置高度和位置，最后为图形添加鼠标交互和动画效果，实现基础可视化。
用 JavaScript 动态生成 SVG 矢量图形，是一种灵活且高效的方式，适用于数据可视化、交互式图表、动画和响应式 UI 元素。SVG 本身是基于 XML 的文本格式，可以直接在 HTML 中嵌入或通过 JavaScript 创建和操作。
创建基本 SVG 容器
要在页面中动态生成 SVG，首先要创建一个 svg> 元素，并将其插入 DOM。
示例：创建一个 400x300 的 SVG 画布
const svg = document.createElementNS('https://www.php.cn/link/f1af9918adf75d2cfe2e87861a72f1f6', 'svg');
svg.setAttribute('width', 400);
svg.setAttribute('height', 300);
document.body.appendChild(svg);
注意：必须使用 createElementNS 并传入 SVG 命名空间（'https://www.php.cn/link/f1af9918adf75d2cfe2e87861a72f1f6'），否则元素无法正确渲染。
立即学习“Java免费学习笔记（深入）”；
动态绘制常见图形
可以在 SVG 中添加各种基本形状，如矩形、圆形、线条、多边形等。
绘制一个圆形：
const circle = document.createElementNS('https://www.php.cn/link/f1af9918adf75d2cfe2e87861a72f1f6', 'circle');
circle.setAttribute('cx', 200);
circle.setAttribute('cy', 150);
circle.setAttribute('r', 50);
circle.setAttribute('fill', 'blue');
svg.appendChild(circle);
绘制一个矩形：
const rect = document.createElementNS('https://www.php.cn/link/f1af9918adf75d2cfe2e87861a72f1f6', 'rect');
rect.setAttribute('x', 50);
rect.setAttribute('y', 50);
rect.setAttribute('width', 100);
rect.setAttribute('height', 80);
rect.setAttribute('fill', 'green');
svg.appendChild(rect);
绘制一条线：
const line = document.createElementNS('https://www.php.cn/link/f1af9918adf75d2cfe2e87861a72f1f6', 'line');
line.setAttribute('x1', 0);
line.setAttribute('y1', 0);
line.setAttribute('x2', 400);
line.setAttribute('y2', 300);
line.setAttribute('stroke', 'red');
line.setAttribute('stroke-width', 2);
svg.appendChild(line);
结合数据生成图形（如柱状图）
可以利用数组数据动态生成多个图形元素，比如实现一个简单的柱状图。
const data = [30, 70, 120, 90, 150]; const barWidth = 50; const barSpacing = 20;data.forEach((value, index) => { const x = index * (barWidth + barSpacing) + 20; const y = 300 - value; // 假设 SVG 高度为 300
const rect = document.createElementNS('https://www.php.cn/link/f1af9918adf75d2cfe2e87861a72f1f6', 'rect'); rect.setAttribute('x', x); rect.setAttribute('y', y); rect.setAttribute('width', barWidth); rect.setAttribute('height', value); rect.setAttribute('fill', 'steelblue'); svg.appendChild(rect); });
这样就能根据数据自动生成一组柱子，形成基础的可视化效果。
添加交互与动画
SVG 元素支持事件监听，可实现鼠标悬停、点击等交互。
circle.addEventListener('mouseover', () => {
circle.setAttribute('fill', 'orange');
});
circle.addEventListener('mouseout', () => {
circle.setAttribute('fill', 'blue');
});
也可以通过修改属性实现简单动画：
function animateCircle() {
let r = 5;
const interval = setInterval(() => {
r += 2;
if (r > 60) clearInterval(interval);
circle.setAttribute('r', r);
}, 100);
}
animateCircle();
基本上就这些。掌握 createElementNS 和 setAttribute 方法，再结合数据和事件，就能用原生 JavaScript 灵活生成并控制 SVG 图形，不依赖第三方库也能实现不错的视觉效果。
