SVG文件不支持引入外部CSS，因其是XML文档受规范限制；仅内联SVG可借助HTML样式层叠，或使用块、Data URI动态注入等替代方案。
SVG文件本身不能直接引入外部CSS样式表——<link rel="stylesheet"> 在 <svg></svg> 根元素内无效，浏览器会忽略它。这是XML文档规范限制，不是浏览器bug。
为什么 在 SVG 里不生效
SVG作为独立XML文档（比如通过 <img src="icon.svg" alt="如何在SVG文件中引入外部CSS样式？" > 或 background-image: url(icon.svg) 引入）时，运行在隔离上下文中，不支持HTML级的 <link> 或 <script></script>。即使你手动写进去，解析器也不会加载或执行。
- 常见错误现象：
<svg><link href="style.css" rel="stylesheet"></svg>完全静默失败，控制台无报错，样式也不应用 - 只有内联 SVG（即直接写在 HTML 中的
<svg>...</svg>）才能使用外部 CSS，靠的是宿主 HTML 文档的样式层叠，而非 SVG 自身加载 - 用
<object></object>或<iframe></iframe>加载 SVG 时，理论上可带<link>，但跨域、CSP、缓存策略会让它极不可靠，生产环境基本不用
真正可用的三种替代方案
想复用 CSS 规则控制 SVG 外观，必须绕过“SVG 引入 CSS”这个伪需求，转向实际可行路径：
-
内联 SVG + 外部 CSS 类名：把 SVG 代码直接写进 HTML，然后用常规 CSS 类选择器控制
path、circle等，例如.icon-success path { fill: var(--success, #10b981); } -
SVG 中嵌入 ：在
<svg></svg>内部写<style>.check { fill: #10b981; }</style>，适用于单图标定制，不污染全局样式表 -
Data URI 背景图 + 动态注入样式：若必须用
background-image，需先 fetch SVG 文本，插入<style></style>或替换fill属性值，再编码为data:image/svg+xml,...—— 这是唯一能让“外部样式”影响背景 SVG 的方式
容易被忽略的关键细节
很多人卡在“为什么我加了 <style></style> 还是没效果”，问题往往出在作用域和语法上：
立即学习“前端免费学习笔记（深入）”；
-
<style></style>必须放在<svg></svg>内部，且在要选中的元素之前（DOM 顺序影响） - 不要用
fill="var(--c)"这类内联属性写法——var()只在 CSS 中有效，在 SVG 属性里是纯字符串 - 如果 SVG 是通过
<use></use>克隆的，<style></style>需写在<defs></defs>或顶层<svg></svg>，且选择器要匹配克隆后的结构（如use .head { fill: red; }） - 所有双引号、尖括号、换行符在 Data URI 场景下必须 URL 编码，漏掉一个
"就会导致整个 background 不显示
归根结底，SVG 不是 HTML，它没有“引入样式表”的能力。所谓“引入”，本质是把样式规则带到 SVG 能感知的上下文里——要么靠宿主 HTML，要么靠内联 <style></style>，要么靠运行时注入编码后的字符串。别在 <link> 上浪费调试时间。
