通过 CSS 的 currentColor 关键字，SVG 元素可无缝继承父级文本颜色（color），从而响应用户自定义样式、浏览器暗色模式及无障碍设置，无需 JavaScript 即可实现高兼容性、无侵入的样式适配。
通过 css 的 `currentcolor` 关键字，svg 元素可无缝继承父级文本颜色（`color`），从而响应用户自定义样式、浏览器暗色模式及无障碍设置，无需 javascript 即可实现高兼容性、无侵入的样式适配。
在 Web 开发中，希望 SVG 图形自动适配页面上下文（如文字颜色、暗色模式、用户 CSS 覆盖）是一个常见但易被忽视的需求。传统做法（如内联 stroke="black" 或 JS 动态读取 getComputedStyle）不仅冗余，还存在兼容性缺陷：JavaScript 可能被禁用、执行时机难把控，且无法响应后续样式变更（如用户切换系统主题或启用阅读器插件）。
最佳实践是使用 CSS 的 currentColor 关键字——它是一个动态、继承式的颜色值，始终等于当前元素的 color 计算值，并天然支持所有 CSS 机制（包括 @media (prefers-color-scheme)、CSS 自定义属性、用户样式表覆盖等）。
只需在 SVG 的 CSS 规则中指定：
svg {
stroke: currentColor; /* 让描边跟随文本色 */
stroke-width: 2;
fill-opacity: 0.35;
}此时，所有 <svg> 元素的 stroke 将自动继承其最近具有 color 声明的祖先元素的颜色。例如：
- 在默认段落中 → 使用 color: black（或浏览器默认值）
- 在 <div style="color: yellow"> 中 → SVG 描边变为黄色
- 在暗色模式下（配合 @media (prefers-color-scheme: dark)）→ 若父级 color 设为 white，SVG 同步响应
✅ 优势总结：
- 零 JavaScript：完全声明式，禁用 JS 时仍生效；
- 实时响应：随 color 变化自动更新，支持 CSS 动画、媒体查询、:hover 等；
- 尊重用户偏好：兼容浏览器暗色模式、屏幕阅读器高对比度模式、用户样式表（User Stylesheets）；
- 简洁可靠：无需 DOM 遍历、事件监听或重绘触发，性能零开销。
⚠️ 注意事项：
- currentColor 仅作用于支持颜色值的 SVG 属性（如 stroke、fill、stop-color），不适用于 background（SVG 元素自身无 background 盒模型背景，需用 <rect> 或 CSS background-color 包裹容器）；
- 若需同时控制填充色（fill）与描边色，可统一设为 currentColor，或对特定 <path>/<circle> 单独设置；
- 避免在 SVG 内联样式中硬编码 stroke（如 <svg stroke="black">），会覆盖 currentColor；优先使用外部或 <style> 块定义。
最终，将 currentColor 作为 SVG 样式设计的默认起点，既符合渐进增强原则，又真正实现了“尊重用户”的 Web 可访问性理念。
