SVG animation vivus

[Matthias Scharwies]

Servus!

Hallo Matthias,

Mal einen Kreis in SVG, speicher ihn und lad' ihn hier hoch. https://maxwellito.github.io/vivus-instant/

jo, das hatte ich auch gesehen, aber leider ohne Erfolg ausprobiert. Habe jetzt nochmal mit ein paar anderen Beispielen getestet.

Quelle hier.

funktioniert gar nicht. Bild wird nur komplett ohne Animation gezeigt.

Die Pfade haben eine Randlinie (stroke), die mit stroke-dasharray gestrichelt und mit stroke-dashoffset verschoben und damit animiert werden können.

• SVG/Tutorials/Einstieg/SVG mit CSS animieren#Laufende_Linien

Deine Grafik hat keine Festlegungen also nimmt der Pfad als Füllung den Standardwert schwarz und als Randlinie eben keine. Deshalb kann auch kein Rand gezeichnet werden.

<?xml version="1.0" encoding="UTF-8"?>
<svg  version="1.1" viewBox="0 0 2000.0001 1999.9999" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(610.95 633.82)">
  <path d="m279.9 1360.4c-295.99-33.278-561.51-196.34-726. 
fill="none" stroke="blACK" stroke-width="15"/>
 </g>
</svg>

Et voilà:

Das bedeutet dann wohl, SVG ist nicht gleich SVG? Es lassen sich demnach nicht beliebige Vektorbilder so einach animieren?

Nur Strichzeichnungen, keine Füllungen! Das klingt so einfach, muss aber im SVG-Markup untersucht werden. Das hat nichts mit dem Aussehen zu tun, sondern wie die einzelnen grafischen Elemente gezeichnet werden.

Häufig bilden Zeichner in Illustrator oder Inkscape Formen nicht als Strich (oder geraden Pfad) mit großer Strichstärke ab, sondern zeichnen die umrisse.

Fazit: Die Figur nimmt viel Speicherplatz ein und lässt sich schlecht mit CSS formatieren oder auch animieren.

Herzliche Grüße

Matthias Scharwies