JavaScript操作SVG：矢量图形入门教程

本文深入浅出地介绍了如何用JavaScript高效操作SVG矢量图形——从内联嵌入HTML、理解viewBox与坐标系统，到使用createElementNS在正确命名空间下动态创建和修改圆、路径等元素；涵盖属性设置、事件监听、CSS交互样式及transform动画控制，并详解path元素d属性的语法逻辑与动态生成技巧，让开发者像操作普通DOM一样灵活驾驭可缩放、高保真、响应式的矢量图形。

SVG 是一种基于 XML 的矢量图形格式，JavaScript 可以直接操作 SVG 元素，就像操作 HTML DOM 一样——因为 SVG 元素本身就是 DOM 节点。

SVG 在网页中怎么写？

最常用的方式是内联写法：把 标签直接写在 HTML 里。它支持宽高、视口（viewBox）、坐标系等关键属性。

• viewBox="0 0 100 100" 定义逻辑坐标范围，让图形自动缩放适配容器
• width/height 控制实际显示尺寸，可设为百分比或固定值
• 内部可嵌入 、、 等图形元素

用 JavaScript 创建和修改 SVG 图形

你可以用 document.createElementNS 创建 SVG 元素（注意命名空间 "http://www.w3.org/2000/svg"），再用 setAttribute 设置属性。

• 创建一个圆：const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
• 设置位置和大小：circle.setAttribute("cx", "50"); circle.setAttribute("cy", "50"); circle.setAttribute("r", "20");
• 添加进 SVG 容器：svgElement.appendChild(circle);
• 修改已有图形：直接用 element.setAttribute("fill", "red") 或 element.style.stroke = "blue"

监听交互与动画控制

SVG 元素支持所有常见 DOM 事件，比如 click、mouseover，也能配合 CSS 或 requestAnimationFrame 做动画。

• 给图形加点击效果：circle.addEventListener("click", () => { circle.setAttribute("r", "30"); });
• 用 CSS 控制 hover 状态：circle:hover { fill: orange; }（需确保 SVG 在 HTML 内联，且样式生效）
• 平滑缩放或移动：改 transform 属性，如 element.setAttribute("transform", "scale(1.2) translate(10,5)");

路径（）和复杂图形怎么处理？

是 SVG 最灵活的图形，靠 d 属性定义绘制指令（M 移动、L 直线、C 贝塞尔曲线等）。JS 可动态拼接 d 字符串，或借助库（如 Snap.svg、d3-path）生成路径数据。

• 画一条折线：path.setAttribute("d", "M10 10 L50 10 L50 50");
• 更新路径：重新赋值 d 字符串即可，浏览器会立即重绘
• 注意：路径命令区分大小写，大写为绝对坐标，小写为相对坐标

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~