如何设置HTML中SVG元素的内联CSS样式？

本文共计873个文字，预计阅读时间需要4分钟。

为什么 style="fill:red" 会破坏 SVG 可维护性

设计工具导出的 SVG 常带内联 fill="#222" 或 style="fill:#000"，这会直接覆盖外部 CSS 规则，导致：svg path { fill: var(--primary) } 完全无效。浏览器按优先级：元素上 style > 内联属性（如 fill） > 外部 CSS。

• 删掉所有 <path>、<circle> 等子元素上的 fill、stroke、style 属性
• 只保留 <svg> 标签上的 viewBox、width、height
• 把需要变色的部分统一设为 fill="currentColor" 或 stroke="currentColor"

currentColor 怎么配合 CSS 控制颜色

currentColor 是个“代理值”，它取自父元素或自身继承的 color 属性。只要没被重置，就能联动文字色、主题色、伪类状态。