如何使用 CSS 将动画添加到 svg

Question

我目前正在完成我的 IT 老师的作业，我们应该制作一个 4 向交通灯，并且汽车应该在红灯处停下。因此，我试图让交通灯上的各个灯闪烁。

没有关键帧动画可以解决这个问题，这真的很令人沮丧。

我正在尝试添加代码：

<circle cx="112" cy="82" r="13" stroke="black" stroke-width="1" 
fill="green" id="g"/>
<circle cx="112" cy="52" r="13" stroke="black" stroke-width="1" 
fill="yellow" id="b"/>
<circle cx="112" cy="22" r="13" stroke="black" stroke-width="1" fill="red" 
id="r"/>

@keyframes red {
    from    {background-color: red;}
    to {background-color: black;}
#r{
position: absolute;
animation-name: red;
animation-duration: 2s;
animation-iteration-count: infinite;

很抱歉，如果我对此很陌生，我是，坦率地说，我们的老师在他的工作上真的很糟糕，他不能，也不会向我们解释。

Answer 1

将您的关键帧动画从动画background-color 更改为动画fill 属性：

@keyframes red {
    from    {fill: red;}
    to {fill: black;}
 }

这是一个工作示例：

@keyframes red {
    from    {fill: red;}
    to {fill: black;}
 }
#r{
position: absolute;
animation-name: red;
animation-duration: 2s;
animation-iteration-count: infinite;
}

<svg>
<circle cx="112" cy="82" r="13" stroke="black" stroke-width="1" 
fill="green" id="g"/>
<circle cx="112" cy="52" r="13" stroke="black" stroke-width="1" 
fill="yellow" id="b"/>
<circle cx="112" cy="22" r="13" stroke="black" stroke-width="1" fill="red" 
id="r"/>
</svg>

这可能看起来很奇怪，但对于 SVG，使用 fill 而不是 background-color 作为背景颜色。