如何使用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

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

Answer 2

其預期的工作，我只是增加了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 3

剛纔在@keyframes部分添加fill:black。它變成綠色像這樣：

.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;}。