為什么我的路徑元素不繼承CSS中設定的填充屬性？

我正在嘗試使 SVG 圖示中的路徑元素從父級繼承填充屬性。

當我在 CSS 中嘗試 set : SVG path { fill: inherit} 時，它不會繼承它，而是選擇他的內部填充屬性。但我不想洗掉他的內部填充屬性，因為圖示變成黑色，我需要為每個圖示設定顏色。我做錯了什么嗎？

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

<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>

我的html：

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

uj5u.com熱心網友回復：

首先，您的樣式使用 SASS / SCSS 語法（樣式嵌套和 &:hover）。如果你沒有為你的樣式使用前處理器，你需要用普通的 CSS 撰寫。

在 CSS 中看起來像：

.contact__email-image {
  fill: red; 
}
.contact__email-image:hover {
  fill: green;
}
.contact__email-image path {
  fill: inherit; /*avoid using all unless you need it*/
}

接下來，您將使用類 contact__email-image 來設定 SVG 樣式，但它不存在。您需要在打開的 svg 標記中添加 。除非您使用它，否則我會用它替換 ID。

您在 SVG 和路徑上還有一些行內 fill="" 代碼，我會洗掉這些代碼，因為如果它們與外部樣式表檔案一起加載，它們可能會優先于您的樣式。

uj5u.com熱心網友回復：

你想要做的不會作業，因為選擇器不能跨越影子 DOM。依靠 CSS 變數來克服這個問題。請注意我是如何fill使用帶有后備的變數來定義路徑的

.contact__email-image {
  --color: red;
}

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

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



<svg fill="none" viewBox="0 0 16 12" id="mail-black-envelope-symbol" xmlns="http://www.w3.org/2000/svg" style="width: 0">
  <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"  style="fill:var(--color,#87B0EE)"/>
</svg>

uj5u.com熱心網友回復：

你要這個效果嗎？它默認為紅色，然后在懸停時變為綠色。

.contact__email-image svg {
  fill: red; 
}
.contact__email-image svg:hover {
  fill: green;
}
.contact__email-image svg>path {
  fill: inherit;
}

<div class="contact__email-image">
  <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"/>
  </svg>
</div>

標籤：htmlcsssvg

上一篇：讓html分隔符回應像素大小

下一篇：如何在圓形容器內居中引導圖示