如何通过CSS修改SVG颜色？解决仅改SVG文件才生效的问题

用<img>标签引入SVG时，浏览器会把SVG当作独立的外部资源，CSS样式无法穿透到SVG内部修改元素颜色，这就是你只能直接改SVG文件的原因。下面是几种用CSS实现改色的可行方案：

方案1：内联SVG到HTML #

把SVG代码直接嵌入HTML中，让SVG成为当前DOM的一部分，这样CSS就能直接选中内部元素设置颜色：

<style>
  .dollar-svg path {
    fill: #ff4444; /* 替换成你需要的颜色 */
  }
  .dollar-svg {
    width: 50%;
    height: 50%;
  }
</style>

<svg class="dollar-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path d="M50 10C27.9086 10 10 27.9086 10 50C10 72.0914 27.9086 90 50 90C72.0914 90 90 72.0914 90 50C90 27.9086 72.0914 10 50 10ZM50 78C35.6122 78 24 66.3878 24 52H34C34 60.8366 41.1634 68 50 68C58.8366 68 66 60.8366 66 52H76C76 66.3878 64.3878 78 50 78ZM66 48H58V34H50V48H42V42H34V48H24C24 33.6122 35.6122 22 50 22C64.3878 22 76 33.6122 76 48H66ZM50 30C54.4183 30 58 33.5817 58 38V42H50V30Z"/>
</svg>

方案2：使用CSS滤镜整体改色 #

如果不需要精确控制单个元素颜色，只是整体调整色调，可以用CSS的filter属性，通过色相旋转、饱和度等参数快速改变SVG颜色：

img {
  width: 50%;
  height: 50%;
  filter: hue-rotate(120deg) saturate(1.5); /* 示例：把绿色转为蓝色，参数可自行调整 */
}

注意：这种方式是对整个SVG做颜色滤镜，适合纯色SVG，复杂配色的SVG可能效果不符合预期。

方案3：用object标签引入+CSS变量 #

如果不想内联SVG，可以用<object>标签引入，同时让SVG内部使用CSS变量，外部通过CSS定义变量值：

1. 修改你的SVG文件，将元素的fill属性替换为CSS变量：

<!-- SVG内部的path等元素修改如下 -->
<path fill="var(--svg-color, green)" d="..."/>

2. HTML中用object标签引入SVG：

<object data="你的SVG文件路径.svg" type="image/svg+xml" class="dollar-svg"></object>

3. CSS中定义变量值：

.dollar-svg {
  width: 50%;
  height: 50%;
}
.dollar-svg {
  --svg-color: #0099ff; /* 设置你需要的颜色 */
}

这种方法需要你能修改SVG文件的代码，但后续改色只需调整CSS变量，不用再编辑SVG文件。

内容的提问来源于stack exchange，提问作者nevazno_html_css_js_1