SVG animation vivus
bearbeitet von Matthias ScharwiesServus!
> 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.
>
>
>
> [![](/images/6d44b314-c2a9-11eb-a5be-b42e9947ef30.svg)](/images/6d44b314-c2a9-11eb-a5be-b42e9947ef30.svg)
>
> [Quelle hier](https://pixabay.com/get/g0c4a1670d4e9aa17dec4d6eab127a5ed0912b87b7e7de43d96b19249df0907cb5e6d6eb9573ac100fea5b9b29a086e52.svg).
>
> 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](https://wiki.selfhtml.org/wiki/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.
>
~~~ HTML
<?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à:
[![ani](/images/5340747c-c2b2-11eb-a891-b42e9947ef30.svg "ani")](/images/5340747c-c2b2-11eb-a891-b42e9947ef30.svg)
>
> 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, hat nichts mit dem Ausshen 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
--
Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“
SVG animation vivus
bearbeitet von Matthias ScharwiesServus!
> 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.
>
>
>
> [![](/images/6d44b314-c2a9-11eb-a5be-b42e9947ef30.svg)](/images/6d44b314-c2a9-11eb-a5be-b42e9947ef30.svg)
>
> [Quelle hier](https://pixabay.com/get/g0c4a1670d4e9aa17dec4d6eab127a5ed0912b87b7e7de43d96b19249df0907cb5e6d6eb9573ac100fea5b9b29a086e52.svg).
>
> 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](https://wiki.selfhtml.org/wiki/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.
>
~~~ HTML
<?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à:
[![ani](/images/5340747c-c2b2-11eb-a891-b42e9947ef30.svg "ani")](/images/5340747c-c2b2-11eb-a891-b42e9947ef30.svg)
>
> Das bedeutet dann wohl, SVG ist nicht gleich SVG? Es lassen sich demnach nicht beliebige Vektorbilder so einach animieren?
>
>
>
>
> Gruss
> Henry
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“
SVG animation vivus
bearbeitet von Matthias ScharwiesServus!
> 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.
>
>
>
> [![](/images/6d44b314-c2a9-11eb-a5be-b42e9947ef30.svg)](/images/6d44b314-c2a9-11eb-a5be-b42e9947ef30.svg)
>
> [Quelle hier](https://pixabay.com/get/g0c4a1670d4e9aa17dec4d6eab127a5ed0912b87b7e7de43d96b19249df0907cb5e6d6eb9573ac100fea5b9b29a086e52.svg).
>
> 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](https://wiki.selfhtml.org/wiki/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.
>
~~~ HTML
<?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á:
[![animiert](/images/ac299722-c2b1-11eb-aad6-b42e9947ef30.svg "animiert")](/images/ac299722-c2b1-11eb-aad6-b42e9947ef30.svg)
>
> Das bedeutet dann wohl, SVG ist nicht gleich SVG? Es lassen sich demnach nicht beliebige Vektorbilder so einach animieren?
>
>
>
>
> Gruss
> Henry
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“