SVG是基于XML的矢量图形格式，可内联于HTML中，通过viewBox定义逻辑坐标、width/height控制显示尺寸；JavaScript可用createElementNS（指定命名空间）创建图形元素并操作属性、事件与动画，path元素通过d属性实现复杂路径绘制。
SVG 是一种基于 XML 的矢量图形格式，JavaScript 可以直接操作 SVG 元素，就像操作 HTML DOM 一样——因为 SVG 元素本身就是 DOM 节点。
SVG 在网页中怎么写？
最常用的方式是内联写法：把 <svg> 标签直接写在 HTML 里。它支持宽高、视口（viewBox）、坐标系等关键属性。
- viewBox="0 0 100 100" 定义逻辑坐标范围，让图形自动缩放适配容器
- width/height 控制实际显示尺寸，可设为百分比或固定值
- 内部可嵌入 <circle>、<rect>、<path> 等图形元素
用 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 做动画。
立即学习“Java免费学习笔记（深入）”；
- 给图形加点击效果：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)");
路径（<path>）和复杂图形怎么处理？
<path> 是 SVG 最灵活的图形，靠 d 属性定义绘制指令（M 移动、L 直线、C 贝塞尔曲线等）。JS 可动态拼接 d 字符串，或借助库（如 Snap.svg、d3-path）生成路径数据。
- 画一条折线：path.setAttribute("d", "M10 10 L50 10 L50 50");
- 更新路径：重新赋值 d 字符串即可，浏览器会立即重绘
- 注意：路径命令区分大小写，大写为绝对坐标，小写为相对坐标
