必须内联 svg 代码，否则 js 无法获取 path、css 无法响应 :hover；因 将 svg 当位图隔离，path 不在当前 dom 树中，document.queryselector("svg path") 返回 null，:hover 样式无效。
必须内联 SVG 代码，不能用 <img> 或 <iframe></iframe>；否则 JS 无法获取 <path></path>、CSS 无法响应 :hover，交互直接失效。
为什么 <img src="chart.svg"> 不行
浏览器把 <img> 当作位图处理，SVG 内部结构完全隔离在外部文档中。执行 document.querySelector("svg path") 返回 null，.chart:hover path { fill: red } 也毫无反应——因为 path 根本不在当前 DOM 树里。
- 常见错误现象：图标加了
class="chart"后写 CSS 换色，结果颜色死活不变 - 导出的 SVG 文件自带
fill="#333"等内联属性，会锁死 CSS 控制权 - 本地双击打开 HTML 时
<img>加载 SVG 失败，是 MIME 类型缺失（需 HTTP 服务返回image/svg+xml）
<object></object> 是折中方案，但有加载时机陷阱
它把 SVG 当独立文档加载，保留样式和脚本能力，但 JS 必须等 load 事件后才能访问内部节点，且跨域 SVG 会被浏览器拦截。
- 必须监听
obj.onload = () => { obj.contentDocument.querySelector("circle") }，不能直接查document -
<object></object>的 fallback 内容（如备用<img>）在 Safari 和 IE 中渲染更可靠 - 旧安卓 WebView（Android 4.4 及更早）对
<use></use>引用外部<symbol></symbol>支持差，内联时建议直接展开路径
内联 SVG 的最小可用结构与关键参数
复制 SVG 源码粘贴进 HTML 即可，但必须保留 viewBox，删掉所有子元素的 fill/stroke 属性，并显式设置宽高。
- 必需属性：
<svg viewbox="0 0 24 24" width="24" height="24"></svg>—— 缺一不可，否则可能渲染为 0×0 或拉伸失真 - 删掉
<path fill="#000"></path>这类内联样式，改用 CSS：.chart path { fill: currentColor; }+<svg class="chart"></svg>上设color - 避免
xmlns属性（HTML5 中非必需，某些解析器会报错）；删掉overflow="hidden"，否则缩放时内容被裁切 -
<svg></svg>默认display: inline，常需加style="display: block; vertical-align: middle;"防底部留白
动态注入 SVG 时的 DOM 操作要点
如果图表由 JS 生成或从 API 获取 SVG 字符串，不能直接 innerHTML = svgString —— 浏览器可能忽略命名空间，导致 <path></path> 不渲染。
- 正确做法：用
DOMParser解析并挂载：const doc = new DOMParser().parseFromString(svgString, "image/svg+xml"); document.body.appendChild(doc.documentElement); - 绑定事件要选对目标：
svgElement.addEventListener("click", e => { if (e.target.tagName === "PATH") {...} }) - 修改路径数据用
e.target.setAttribute("d", newPath)，不是.style.d（d不是 CSS 属性） - IE11 不支持
DOMParser解析 SVG，需降级为字符串替换或预置内联模板
真正容易被忽略的是：viewBox 值必须和原始设计稿一致，否则坐标系错位，动画位移、点击热区全偏；而 currentColor 虽好，但在深色模式下若父级没设 color，图标就彻底隐形。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
