如何使用 CSS 為 SVG 的填充顏色設置動畫？

Question

CSS 允許像這樣改變 SVG 的顏色

.clr {fill: green;}

但是當我使用相同的填充屬性應用動畫時，似乎沒有任何效果。 我該怎么辦？

<svg width="800" height="600" style="background-color:lightblue">

<circle class="clr" cx="610" cy="240" r="4" fill="gold" />

<style>

.clr {animation: col 3s linear infinite;}

@keyframes col {
0%,71% {fill:none}
72% {fill:black}
75%,100% {fill:none}
}

</style>
</svg>

Answer 1

它按預期工作，我只是增加了circle半徑並改變了它的位置以在 50x 和 50y 上顯示它，

 .color {animation: col 3s linear infinite;} @keyframes col { 0%,71% {fill:none} 72% {fill:black} 75%,100% {fill:none} }

 <svg width="800" height="600" style="background-color:lightblue"> <circle class="color" cx="50" cy="50" r="30" fill="gold" /> </svg>

Answer 2

您只需在@keyframes部分添加fill:black @keyframes 。 像這樣將其更改為綠色：

 .color {animation: col 3s linear infinite;} @keyframes col { 0%,71% {fill:none} 72% {fill:green} 75%,100% {fill:none} }

 <svg width="800" height="600" style="background-color:lightblue"> <circle class="color" cx="610" cy="240" r="4" fill="gold" /> </svg>

並且不想使用.color {fill: green;} 。

Answer 3

嘗試將您的班級更改為另一個班級名稱，因為我認為顏色是一個保留字，所以我認為它不起作用。

Answer 4

您無法從動畫none （無），以green （東西）的平穩過渡。 而是這樣做：

@keyframes col {
  0%, 71% { fill: none; } /* change attribute value to `inherit` */
  72% { fill: black; }
  75%, 100% { fill: none; } /* or change value to `currentcolor` */
}

結果如下：

@keyframes col {
  0%, 71% { fill: inherit; }
  72% { fill: black; }
  75%, 100% { fill: currentcolor; }
}

然后使用animation屬性或element.animate來達到預期的效果。

Answer 5

以下是來自@Muhammad 的示例（因為它比 OP 的右下角小點示例更容易看到）具有內聯樣式部分的svg 。 當我閱讀規范時，它應該按原樣工作。 但是，3 年后，現在是 2020 年，似乎仍然缺乏瀏覽器支持。

SVG 2 要求：將 HTML5 ' style ' 元素屬性添加到 SVG 的 ' style ' 元素。

解決方案： SVG 2 'style' 元素應與 HTML5 'style' 元素對齊。

目的：不要讓作者對 HTML 和 SVG 內容中“樣式”元素的不同行為感到驚訝。

我在VS Code 中使用了一個名為jock.svg的插件，動畫在實時預覽窗格中按預期工作。 只需“按原樣”復制並保存 svg 代碼，文件擴展名為“svg”。

如果沒有描述，很難知道 OP 想要什么動畫，因為據說代碼片段不起作用。

為清楚起見，我將描述此示例的作用：它在左上角的淺藍色背景上顯示一個短暫（3% 的時間）閃爍的黑色圓圈。 請注意，動畫工作時會忽略原始的“金色”填充。 今天在 Safari（Mac、iPad）、Chrome（iPad）和 Edge（iPad）中，我看到的只是“金色”圓圈。 沒有應用動畫。 請評論您的瀏覽器是否（何時）工作。 我懷疑瀏覽器支持中的這個漏洞將來會被填補。

[編輯] 它適用於 Chrome 81.0.4044.92 (Mac)

 <svg width="800" height="600" style="background-color:lightblue"> <circle class="color" cx="50" cy="50" r="30" fill="gold" /> <style> .color {animation: col 3s linear infinite;} @keyframes col { 0%,71% {fill:none} 72% {fill:black} 75%,100% {fill:none} } </style> </svg>