给div内的SVG应用CSS类无效，如何解决？

先找原因，再对应解决 #

• SVG内部写了固定fill属性
  要是你用的SVG文件里，<path>这类元素本身加了fill="#xxxx"这种内联样式，CSS里的fill就会被盖过去。
  解决：要么打开SVG文件删掉所有元素上的fill、stroke这类内联属性；要么紧急情况下用!important强制覆盖（尽量别用，优先清内联）：

  .icon > svg {
      fill: brown !important;
      width: 100%;
      height: 100%;
  }
  

• 用<img>标签引入SVG
  要是你是通过<img src="xxx.svg">加载的SVG，CSS根本穿不进去改内部样式。
  解决：要么把SVG代码直接粘到HTML里当.icon的子元素；要么换<object>标签引入，然后在SVG文件里加内部样式：
  HTML代码：

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

  SVG文件里添加：

  <svg xmlns="http://www.w3.org/2000/svg" ...>
      <style>
          path { fill: brown; }
      </style>
      <!-- 你的SVG图形元素 -->
  </svg>
  

• CSS选择器被别的样式覆盖
  打开浏览器F12开发者工具，选中SVG元素看样式面板，要是你的fill样式被划掉了，就是被更高优先级的规则覆盖了。
  解决：给SVG加个专属类名，提高选择器优先级：
  HTML：

  <div class="icon">
      <svg class="icon-svg"></svg>
  </div>
  

  CSS：

  .icon .icon-svg {
      fill: brown;
      width: 100%;
      height: 100%;
  }
  

• SVG没加命名空间
  检查SVG根标签有没有写xmlns="http://www.w3.org/2000/svg"，没写的话浏览器可能不认，样式自然不生效，加上就行。

快速排查步骤 #

1. 按F12打开开发者工具，点击SVG元素查看样式面板，确认你的CSS规则有没有被应用；
2. 查看SVG的DOM结构，检查内部元素是不是有内联的fill属性；
3. 确认SVG的引入方式，对应选择上面的解决办法。

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