JavaScript_SVG矢量图形动态生成-js教程-PHP中文网

JavaScript_SVG矢量图形动态生成

幻影之瞳

发布： 2025-11-22 20:04:37

原创

378人浏览过

使用JavaScript动态生成SVG需通过createElementNS创建元素并添加到DOM，示例中先构建400x300画布，再绘制圆形、矩形和线条，结合数据数组生成柱状图，每个柱子根据数值设置高度和位置，最后为图形添加鼠标交互和动画效果，实现基础可视化。

javascript_svg矢量图形动态生成

用 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);

登录后复制

绘制一个矩形：

PictoGraphic

AI驱动的矢量插图库和插图生成平台

查看详情

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;
<p>data.forEach((value, index) => {
const x = index * (barWidth + barSpacing) + 20;
const y = 300 - value; // 假设 SVG 高度为 300</p><p>const rect = document.createElementNS('<a href="https://www.php.cn/link/f1af9918adf75d2cfe2e87861a72f1f6">https://www.php.cn/link/f1af9918adf75d2cfe2e87861a72f1f6</a>', 'rect');
rect.setAttribute('x', x);
rect.setAttribute('y', y);
rect.setAttribute('width', barWidth);
rect.setAttribute('height', value);
rect.setAttribute('fill', 'steelblue');
svg.appendChild(rect);
});</p>

登录后复制

这样就能根据数据自动生成一组柱子，形成基础的可视化效果。

添加交互与动画

SVG 元素支持事件监听，可实现鼠标悬停、点击等交互。

circle.addEventListener('mouseover', () => {
  circle.setAttribute('fill', 'orange');
});
<p>circle.addEventListener('mouseout', () => {
circle.setAttribute('fill', 'blue');
});</p>

登录后复制

也可以通过修改属性实现简单动画：

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 图形，不依赖第三方库也能实现不错的视觉效果。

以上就是JavaScript_SVG矢量图形动态生成的详细内容，更多请关注php中文网其它相关文章！