nicht angemeldet
SVG mit CSS animieren
0 
Matthias Scharwies
0 0 0 
Matthias Apsel
SVG mit CSS animieren
Hallo, ich möchte eine Flagge von der Breite 0 auf ihre Gesamtbreite wachsenlassen (Höhe bleibt gleich). Ich habe verschiedene Varianten versucht, die letzte hier:
<html>
<head>
<meta charset="utf-8">
<style>
@keyframes wachsen {
0 {
width: 0;
}
100% {
width: 100%;
}
}
svg {
height: 200px;
animation: wachsen 5s linear;
}
</style>
</head>
<body>
<svg viewbox="0 0 4 3">
<desc>Flagge Deutschlands</desc>
<rect x="0" y="0" width="5" height="1" fill="black" />
<rect x="0" y="1" width="5" height="1" fill="red" />
<rect x="0" y="2" width="5" height="1" fill="#fc0" />
</svg>
</body>
</html>`
Leider klappt es nicht. Könnt Ihr mir einen Tipp geben? Gruß Didi
-
Servus!
Hallo, ich möchte eine Flagge von der Breite 0 auf ihre Gesamtbreite wachsenlassen (Höhe bleibt gleich). Ich habe verschiedene Varianten versucht, die letzte hier:
Leider klappt es nicht. Könnt Ihr mir einen Tipp geben?
Versuch mal das, ob dir das passt:
svg { height: 200px; animation: wachsen 5s linear; width: 0; animation-fill-mode: forwards; } @keyframes wachsen { 0 { width: 0; } 100% { width: 300px; } }Ein Anfangswert für width schon bei svg; animation-fill-mode, damit es nicht zurückspringt.
Die Höhe skaliert aber mit.
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste-
Danke, die Richtung stimmt. Die Höhe sollte aber nicht wachsen. Und was mich wundert, ist, das das Rechteck am Ende nach rechts rutscht. Woher kommt dies? Gruß Didi
-
ungetestet: preserveAspectratio svg attribut auf none setzen, damit die höhe nicht mit wächst.
warum das svg nach rechts rutscht kann ich nicht erkennen. du könntest das svg aber eindeutig positionieren. mit position absolute left top, oder display inline-block und einem entsprechenden text align. so, dass es eine eindeutig definierte ausgangsposition hat. darüberhinaus würde ich den transform origin definieren, dann sollte das ganze eindeutig sein.
eine derartige, einfache animation würde ich mit transition lösen.
-
Hallo Dietrich der Anfänger,
Und was mich wundert, ist, das das Rechteck am Ende nach rechts rutscht. Woher kommt dies?
Wo kann man sich das ansehen?
PS: Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge, auch wie man Zeilenumbrüche erzeugt.
Bis demnächst
Matthias
-
-