我使用currentColor通過css設置svg填充值。這沒有問題，除了在加載期間，svg首先加載為黑色，然后在css加載后切換到正確的顏色。

我嘗試了許多不同的方法，包括使用內聯樣式，使用兩個填充聲明，希望在currentColor尚未定義時優先生效，等等。

每當我定義了一個實際的填充顏色，我似乎不能讓它在加載時改變為currentColor值。

我錯過了什么？

使用& ltstyle & gt標簽，然后在那之后加載其他CSS。

<svg>
  <style>
    .color-1 {
      color: lightblue;
    }
  </style>
  <rect class="color-1" width="100%" height="100%" fill="currentColor"/>
</svg>
...
<link rel="stylesheet" href="styles.css">

給想要引用的元素一個類或id，并在以后用它來覆蓋顏色。

/* styles.css */
.color-1 {
  color: aquamarine;
  transition: color .2s ease;
}

如果您擔心將CSS放在& ltbody & gt，您可以在& lthead & gt取而代之，用！重要，但這可能會導致其他問題。

解決方案2 不要依賴currentColor，直接使用fill屬性:

<svg>
  <rect class="color-1" width="100%" height="100%" fill="lightblue"/>
</svg>
...
<link rel="stylesheet" href="styles.css">

/* styles.css */
.color-1 {
  fill: aquamarine;
  transition: fill .2s ease;
}

這是因為類和id比fill屬性具有更高的特異性。

這兩種解決方案都可以在根& ltsvg & gt元素，如果你喜歡的話。