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>

最佳答案

它的工作正常,我只是增加了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>

关于html - 如何使用CSS设置SVG的填充颜色的动画?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45647521/

10-12 12:39