SVG是基于XML的矢量图形格式，本质为可编程DOM：JS可直接查询、修改属性、添加事件、动态绘制，支持交互与动画，需内联使用以确保操作性。
SVG 是一种基于 XML 的矢量图形格式，它用代码描述图形（比如线条、圆、文字），而不是像 PNG 那样靠像素点。在 JavaScript 中操作 SVG，本质上就是操作 DOM 元素——因为浏览器把 SVG 标签（如 <svg>、<circle>）当作普通 HTML 元素来解析和管理。
SVG 在 JS 中是“可编程的 DOM”
你写的 <svg><rect x="10" y="20" width="100" height="50"></rect></svg>，JS 能直接用 document.querySelector('rect') 拿到，也能用 .setAttribute() 改颜色、位置，或用 .style.fill = 'red' 设置样式。它和 <div> 一样支持事件监听、动画、动态增删。
常用操作方式（直接上手就能用）
-
创建 SVG 元素：用
document.createElementNS('http://www.w3.org/2000/svg', 'circle')—— 注意必须用带命名空间的createElementNS，不能用普通的createElement -
修改属性：用
elem.setAttribute('cx', 150)或elem.cx.baseVal.value = 150（后者适合动画中精确控制） -
添加事件：比如
circle.addEventListener('click', () => alert('Clicked!'))，和普通元素完全一致 -
动态绘制路径：设置
path.setAttribute('d', 'M10 10 L100 50 Q150 80 200 50')，字符串d就是 SVG 路径指令
和 Canvas 的关键区别（别混用）
Canvas 是“画布”，绘图后内容不保留为对象；SVG 是“文档”，每个图形都是独立可查、可改、可交互的节点。比如你要让一个圆响应鼠标悬停变色，SVG 只需加 onmouseover 或 CSS :hover；Canvas 则得自己监听坐标、重绘整帧。
小技巧：内联 SVG 更好操作
把 SVG 写在 HTML 里（不是作为 <img src="x.svg">），JS 才能直接访问它的内部元素。如果 SVG 是外部文件，要用 fetch 加载后插入 DOM，再操作，否则会受跨域或 DOM 未就绪限制。
立即学习“Java免费学习笔记（深入）”；
基本上就这些。SVG 不是黑盒，它是结构清晰的 DOM 子集，JS 操作起来自然、直观、可控。
