CSSでSVGの塗りつぶし色をアニメーション化する方法は？

Question

CSSはこの

.clr {fill: green;} 

のようにSVGの色を変更することができます。しかし、私は同じ塗りつぶしとアニメーションを適用すると何も動いていないようにみえ属性。私は何をすべきか？

<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

その、私はただあなただけ@keyframesセクションでfill:blackを追加し、

.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

をcircle半径が増加し、50倍と50Y上でそれを表示するためにその位置を変更しました。このような緑のように変更します。

.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;}を使用する必要はありません。