Neuer Kurs! Jeder Programmierer sollte generative KI lernen!
Kostenlose Lektion ausprobieren+ 2
Why this animation is not working?
<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <svg width="1000" height="250"> <circle cx="150" cy="150" r="50" fill="orange"/> <animate attributeName="x" from="0" to="200" dur="3" fill="freeze" repeatCount="2"/> </svg> </body> </html>
9 Antworten
+ 5
First of all you need to animate "cx" not "x".
Second thing is you need to have animate tag inside the circle tag:
<circle>
<animate>
</circle>
Everything else is fine. 👍
+ 7
Error is the value of cx-attribute. You want the circle move from "0" to "200" and write in the same time cx="150". Mistake. The correct way is the next:
<svg width="1000" height=250">
<circle cx="" cy="150" r="50" fill="orange">
<animate attributeName="cx" from="0" to="200" dur="3" fill="freeze" repeatCount="2" />
</circle>
</svg>
+ 6
Use CSS for this purpose.
+ 6
I'm too :)
+ 4
With pleasure!
+ 2
How should i do to make this circle going square?
+ 2
thx i am just learning it
+ 2
Maybe trying to animate border-radius in css. Other thing (using SVG) is complicated, it involves transition to path/points (you need coordinates for each point). I think that css result is way easies than svg.
+ 1
Thank you for help!
Häufig solche Fragen?
Effizienter lernen, kostenlos:
Heute heiß
[SOLVED] Ballpark Challenge
1 Votes
HELP. UNFAIR STREAK LOSS
2 Votes
Who will
0 Votes
There is an error.
0 Votes