通过 CSS 的 currentColor 关键字，SVG 可无缝继承父元素的 color 值（如文字颜色），从而自动适配用户 CSS 覆盖、暗色模式插件及系统级主题偏好，无需 JavaScript 干预，完全支持无脚本环境。
通过 css 的 `currentcolor` 关键字，svg 可无缝继承父元素的 `color` 值（如文字颜色），从而自动适配用户 css 覆盖、暗色模式插件及系统级主题偏好，无需 javascript 干预，完全支持无脚本环境。
在 Web 开发中，让 SVG 图形“融入”宿主文本样式（例如自动采用当前文字颜色作为描边色）是一项常见但易被忽视的需求。尤其当网站需尊重用户的个性化设置——如浏览器扩展的 CSS 覆盖、操作系统级暗色模式（prefers-color-scheme）、或辅助技术定制样式时，硬编码颜色（如 stroke: black）会破坏可访问性与一致性。
幸运的是，CSS 提供了一个简洁、原生、零依赖的解决方案：currentColor 关键字。它并非固定值，而是动态映射到当前元素计算后的 color 属性值——这正是文本颜色的来源。将 stroke: currentColor 应用于
✅ 正确用法示例
svg {
stroke-width: 2;
fill-opacity: 0.35;
stroke: currentColor; /* 关键：自动继承 color */
}
配合 HTML 使用时，无需任何 JS：
<div style="color: #1a73e8;"> <svg width="180" height="40"><circle cx="20" cy="20" r="15" fill="grey"></circle><circle cx="60" cy="20" r="15" fill="red"></circle><circle cx="100" cy="20" r="15" fill="green"></circle><circle cx="140" cy="20" r="15" fill="blue"></circle></svg> </div> <div style="color: #f9ab00; background: #121212;"> <svg width="180" height="40"><!-- 同样自动变为金色描边 --></svg> </div>
此时，无论用户启用了系统暗色模式、安装了深色主题插件，还是通过用户样式表强制修改了 body { color: #ff6b6b }，所有设置了 stroke: currentColor 的 SVG 都将实时响应，描边色始终与周围文字保持一致。
⚠️ 注意事项与进阶建议
- currentColor 仅作用于继承属性：stroke、fill、stop-color 等支持该关键字；但 background-color 不继承 color，因此无法用 currentColor 控制 SVG 背景——若需背景适配，应将
- 避免覆盖 currentColor：移除此前为兼容而添加的 @media (prefers-color-scheme: dark) { svg { stroke: white; } } 类规则，它们会与 currentColor 冲突，反而破坏自动适配逻辑。
- 填充色处理：若希望 fill 也响应主题（如图标填充），可统一设为 fill: currentColor，但需注意语义——纯色图标常需保留原始 fill（如红色警告图标），此时建议仅对描边或轮廓使用 currentColor，填充色按设计意图显式声明。
- 无障碍友好：currentColor 完全基于 CSS 计算，不依赖 JavaScript，天然支持禁用 JS 的场景（如隐私浏览、企业策略限制），符合渐进增强原则。
综上，currentColor 是实现 SVG 主题自适应最轻量、最健壮、最符合 Web 标准的方式。它让 SVG 真正成为页面样式流的一部分，而非孤立的“图片黑盒”。
