SVG mit Javasript animieren

[Stefan]

Hallo!

Habe folgendes Problem beim dem ich einfach nicht weiter komme.

Ich möchte eine SVG Linie mit JavaScript animieren und zwar soll zu beginn, beim Seitenaufbau, eine einfache graue Linie gezeichnet werden. Anschließend soll die Linie strichliert dargestellt werden und sich in eine Richtung bewegen. So in etwa:

Hoffe mir kann jemand weiterhelfen.

Liebe Grüße

Stefan

[MrMurphy1]

Hallo

Warum soll es JavaScript sein? Wenn die Besucher JS blockiert haben funktioniert die Darstellung nicht mehr.

SVG bringt dafür doch eigene Mittel mit, die in jedem Fall funktionieren.

Gruss

MrMurphy

[Stefan]

Hallo,

danke für deine rasche Antwort.

Bin auf JavaScript angewiesen, denn die einzige, mir bekannte, Möglichkeit SVG Grafiken im IE und Edge zu animieren besteht darin Javascript zu verwenden.

Falls nun jemand JS deaktiviert hat, wird dieser mittels noscript-Tag informiert, dass die Seite ohne JS nicht korrekt angezeigt wird.

Mit freundlichen Grüßen

Stefan

[Vollzitat entfernt]

[Matthias Scharwies]

Servus!

Bin auf JavaScript angewiesen, denn die einzige, mir bekannte, Möglichkeit SVG Grafiken im IE und Edge zu animieren besteht darin Javascript zu verwenden.

Du hast Recht

• Animationen mit SMIL funktionieren nicht im Internet Explorer.

• Die CSS-animation-Eigenschaft geht ab IE10 (IE8+9 jeweils nur noch ein halbes Prozent Nutzer), allerdings gilt das nur für CSS und nicht für SVG

Alternativen mit JavaScript:

• Ladebalken mit setTimeout - allerdings veraltet, mit FF47 kommt element.animate, für das es bereits einen Polyfill gibt. Dann werden wir dieses Beispiel aktualisieren.

• requestAnimationFrame

Die Beispiel müsste auf SVG umgebaut werden.

Matthias Scharwies

[Stefan]

Hallo!

Danke für die Antwort

Werd mich gleich an die Arbeit machen.

Liebe Grüße

[Vollzitat entfern]

[Stefan]

@Matthias Scharwies

Vielen Dank für deine Hilfe!

Funktioniert Tadellos.

Liebe Grüße

[Matthias Scharwies]

Servus!

Auch wenn es nicht im IE geht, habe ich die Grafik doch einmal mit CSS animiert:

• SVG/Anwendung_und_Praxis/SVG mit CSS animieren #Laufende_Linien

Herzliche Grüße

Matthias Scharwies

[JürgenB]

Hallo Stefan,

kennst du schon https://msdn.microsoft.com/de-de/library/gg193979(v=vs.85).aspx ?

Gruß
Jürgen

[Matthias Scharwies]

Servus!

Hallo Stefan,

kennst du schon https://msdn.microsoft.com/de-de/library/gg193979(v=vs.85).aspx ?

@JürgenB Das Tutorial ist super, der Browser der gleichnamigen Firma leider nicht:

Zitat: Live-Link: Beispiel 1 (Dieses SMIL-Beispiel funktioniert in Internet Explorer nicht.)

Gruß
Jürgen

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Stefan

Kam gerade übern Ticker: The Art of SVG Animation

LLAP 🖖