SVG是基于XML的矢量图形格式，本质为可编程DOM：JS可直接查询、修改属性、添加事件、动态绘制，支持交互与动画，需内联使用以确保操作性。
SVG 是一种基于 XML 的矢量图形格式，它用代码描述图形（比如线条、圆、文字），而不是像 PNG 那样靠像素点。在 JavaScript 中操作 SVG，本质上就是操作 DOM 元素——因为浏览器把 SVG 标签（如 、
SVG 在 JS 中是“可编程的 DOM”
你写的 Canvas 是“画布”，绘图后内容不保留为对象；SVG 是“文档”，每个图形都是独立可查、可改、可交互的节点。比如你要让一个圆响应鼠标悬停变色，SVG 只需加 把 SVG 写在 HTML 里（不是作为 动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包 立即学习“Java免费学习笔记（深入）”； 基本上就这些。SVG 不是黑盒，它是结构清晰的 DOM 子集，JS 操作起来自然、直观、可控。，JS 能直接用 document.querySelector('rect') 拿到，也能用 .setAttribute() 改颜色、位置，或用 .style.fill = 'red' 设置样式。它和 常用操作方式（直接上手就能用）
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 的关键区别（别混用）
onmouseover 或 CSS :hover；Canvas 则得自己监听坐标、重绘整帧。小技巧：内联 SVG 更好操作
fetch 加载后插入 DOM，再操作，否则会受跨域或 DOM 未就绪限制。
