如何使用 CSS 为 SVG 的填充颜色设置动画? [英] How to animate the fill color of SVG with CSS?
本文介绍了如何使用 CSS 为 SVG 的填充颜色设置动画?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
CSS 允许像这样改变 SVG 的颜色
CSS allows to change the color of SVG like this
.clr {fill: green;}
但是当我使用相同的填充属性应用动画时,似乎没有任何效果.我该怎么办?
But when I apply animation with the same fill attributes nothing seems to work. What should I do?
<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 上显示,
Its working as expected, I just increased the circle
radius and changed its position to show it on 50x and 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>
这篇关于如何使用 CSS 为 SVG 的填充颜色设置动画?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文