为何SVG的path元素无法继承CSS设置的fill属性？

问题 #

我想让SVG图标里的path元素继承父元素的fill属性，在CSS里设置SVG path { fill: inherit}后没生效，path还是用自身内部的fill属性。我不想删掉path的内部fill属性，因为删了图标会变黑，而且需要给每个图标设置不同颜色，请问哪里操作错了？

代码示例 #

CSS代码

.contact__email-image {
  fill: red;
  path {
    all: inherit;
  }
  &:hover {
    fill: green;
  }
}

SVG定义代码

<svg fill="none" viewBox="0 0 16 12" id="mail-black-envelope-symbol" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.953.252L8 6.336 1.047.252C1.332.096 1.653 0 2 0h12c.347 0 .668.096.953.252zm.79 10.71c.158-.286.257-.611.257-.962V2c0-.391-.117-.754-.312-1.062L10.691 5.31l5.052 5.652zM9.94 5.968l-1.61 1.409a.5.5 0 01-.658 0l-1.61-1.41-5.116 5.725c.307.193.666.308 1.055.308h12c.389 0 .748-.115 1.055-.308L9.939 5.968zM0 2c0-.392.117-.754.312-1.062l4.996 4.37-5.051 5.654A1.976 1.976 0 010 10V2z" fill="#87B0EE"/>
</svg>

使用代码

<svg class="contact__email-image" viewBox="0 0 16 12" width="16" height="12"> <use xlink:href="img/icons/icons.svg#mail-black-envelope-symbol"></use> </svg>

解决方案 #

• 核心问题：用<use>引用的SVG，内部的path属于Shadow DOM范畴，不是当前DOM树的直接子元素，所以你写的.contact__email-image path选择器根本匹配不到它，all: inherit自然不会生效。

• 方法一：利用currentColor特性（最简便）
  把SVG定义里path的fill属性改成currentColor，然后在父元素（带.contact__email-image类的svg）上用color属性控制颜色：

  .contact__email-image {
    color: red;
    &:hover {
      color: green;
    }
  }
  

  SVG定义修改：

  <path ... fill="currentColor"/>
  

  这样path会自动继承父元素的color值，既不用额外写路径选择器，还能给不同图标设置不同默认色（给对应父元素设color就行）。

• 方法二：直接内联SVG
  把SVG直接写在HTML里，不用<use>引用。这样.contact__email-image path就能匹配到内部的path元素，你的原有CSS设置就会生效。缺点是会增加HTML代码量，适合图标数量少的场景。

• 方法三：使用CSS变量
  在SVG定义里把path的fill设为CSS变量，比如fill="var(--icon-color)"，然后在父元素上定义这个变量：

  .contact__email-image {
    --icon-color: red;
    &:hover {
      --icon-color: green;
    }
  }
  

  SVG定义修改：

  <path ... fill="var(--icon-color)"/>
  

  这种方式既保留了<use>的复用性，又能灵活控制颜色，还能给不同图标设置不同默认变量值。

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