直接 url() 引入 SVG 会丢失可编辑性，因其被当作外部图像资源渲染，不注入 DOM，导致无法用 CSS 选中元素、JavaScript 操作或动态改色；保留可编辑性的正确方式是内联 SVG 或用 <object>/<iframe> 嵌入，使 SVG 内容进入当前 DOM 树。
为什么直接 url() 引入 SVG 会丢失可编辑性？
因为 url() 加载的 SVG 被当作外部图像资源（类似 PNG），浏览器只渲染像素或矢量图形，不将其注入 DOM。这意味着你无法用 CSS 选中内部元素（如 <path>）、无法用 JavaScript 操作、也无法通过 fill 或 stroke 动态改色。
真正保留可编辑性的两种可行方式
必须让 SVG 内容进入当前 HTML 文档的 DOM 树，而不是作为外部资源加载。只有这样，样式和脚本才能生效。
-
内联 SVG：把 SVG XML 直接写进 HTML 的
<svg>标签里——最简单、兼容性最好、完全可控 -
使用
<object>或<iframe>嵌入外部 SVG 文件：需注意跨域限制，且 JS 访问子文档需额外处理（contentDocument）；CSS 作用域默认隔离，需在 SVG 文件内写样式或通过 JS 注入
千万别用这三种“看似能用”的方式
它们都导致 SVG 不可编辑：
-
background-image: url("icon.svg")—— 纯图像渲染，DOM 无节点 -
<img src="icon.svg">—— 同样是独立资源，无法访问内部结构 -
<embed src="icon.svg">—— 已废弃，行为不稳定，多数现代浏览器禁用脚本交互
如果非要从 CSS 控制 SVG 颜色，该怎么做？
前提是 SVG 已内联或通过 <object> 正确嵌入，并且 SVG 内部未硬编码 fill/stroke 属性（即用 fill="currentColor" 或省略）：
立即学习“前端免费学习笔记（深入）”；
- 给外层容器设
color，SVG 内用fill="currentColor"继承文字色 - 对内联 SVG 的
<path>等元素直接写 CSS：svg path { fill: var(--accent); } - 避免在 SVG 文件里写
fill="#000"这类固定值，否则会覆盖 CSS
真正麻烦的不是怎么引入，而是 SVG 源文件是否为“样式友好型”——很多设计导出的 SVG 默认带内联 fill，得手动删掉或替换成 currentColor。
