So fügen Sie eine Animation mit CSS zu SVG hinzu

Question

Ich arbeite gerade an einer Aufgabe von meinem IT-Lehrer, wo wir eine 4-Wege-Ampel machen sollen, und das Auto soll an einem roten Licht anhalten. Ich versuche also, die einzelnen Lichter an der Ampel blinken zu lassen.

Keine Keyframes Animationen funktionieren dafür, und es ist wirklich frustrierend.

Ich versuche, den Code zu diesem hinzuzufügen:

<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; 

Es tut mir leid, wenn ich dies sehr neu erscheinen, ich bin, und ehrlich gesagt, unser Lehrer ist in seinem Job wirklich schlecht, kann er nicht und wird uns nichts erklären.

Answer 1

Ihre Keyframes Animation Ändern der background-color von Animieren die fill Eigenschaft zu animieren:

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

Hier ist ein funktionierendes Beispiel:

@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>

Es könnte seltsam erscheinen, aber mit SVG fill wird anstelle von background-color für th verwendet e Hintergrundfarbe.