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

原文由 CeeJay 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Muhammad 发布，翻译遵循 CC BY-SA 3.0 许可协议