SVG animation vivus

[Henry]

Hallo,

auf dieser Seite sind ein paar schöne SVG-Animationen als Beispiel für dieses Script.

Leider verstehe ich das ganze Konzept nicht und probiere hier schon seit Stunden ohne Erfolg. Wenn ich mir das bei github anschaue und richtig verstehe, sollte es doch einfach sein, sein eigenes SVG animieren zu lassen. Nur gibts leider kein Clean-Beispiel, wo man nur die URL zum eigenen SVG austauscht, schon ein animiertes Ergebnis erhält, um sich danach langsam an die Parameter heran zu tasten.

Stattdessen einige Nutzungsschnipsel, die aber bei mir nicht funktionieren(entweder gar kein Bild oder ohne Animation). Verstehe ich das ganze Konzept dort falsch oder wie würde minimalster Code aussehen um dieses Script mit einer externen SVG nutzen zu können?

Gruss
Henry

[Matthias Scharwies]

Servus!

Hallo,

auf dieser Seite sind ein paar schöne SVG-Animationen als Beispiel für dieses Script.

Super Idee!

Leider verstehe ich das ganze Konzept nicht und probiere hier schon seit Stunden ohne Erfolg.

Ah verstanden:

Ich habe auf Vivus instant ein Bild hochgeladen (besteht aus mehreren Pfaden, "Selfhtml" besteht aus nur einem Pfad mit einigen m-Befehlen, müsste noch aufgetrennt werden.)

Den Pfaden werden Klassen zugeordnet, es gibt drunter ein umfangreiches ´<style data-made-with="vivus-instant"></style>`-Element:

<style data-made-with="vivus-instant">
.WtJRroxN_5{
  stroke-dasharray:1707 1709;
  stroke-dashoffset:1708;
  animation:
    WtJRroxN_draw_5 7200ms linear 0ms infinite, 
    WtJRroxN_fade 7200ms linear 0ms infinite;
}
@keyframes WtJRroxN_draw_5{
   25.405982905982903%{stroke-dashoffset: 1708}
   52.77777777777778%{ stroke-dashoffset: 0;}
  100%{ stroke-dashoffset: 0;}
}
</style>

Hatte lang das JavaScript oder die CDN-Einbindung gesucht, aber es ist ja „nur“ eine CSS-Animation! Genial!

Wenn ich mir das bei github anschaue und richtig verstehe, sollte es doch einfach sein, sein eigenes SVG animieren zu lassen. Nur gibts leider kein Clean-Beispiel, wo man nur die URL zum eigenen SVG austauscht, schon ein animiertes Ergebnis erhält, um sich danach langsam an die Parameter heran zu tasten.

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

Hier gibt es weitere Infos: https://www.javascripting.com/view/vivus

Grundformen wie circle und rect werden mit "pathformer" in Pfade umgewandelt - ein Füllen ist nicht möglich

Stattdessen einige Nutzungsschnipsel, die aber bei mir nicht funktionieren(entweder gar kein Bild oder ohne Animation). Verstehe ich das ganze Konzept dort falsch oder wie würde minimalster Code aussehen um dieses Script mit einer externen SVG nutzen zu können?

Ich bin grad nicht zuhause, morgen bau ich die Grafik aus und aktualisiere das Wiki-Beispiel!

Herzliche Grüße

Matthias Scharwies

[Henry]

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.

Quelle hier.

Funktioniert wie erhofft, also animiert.

Quelle hier.

Funktioniert teilweise, wird also animiert angezeigt, aber dafür leider nicht mehr komplett.

Fazit?

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

Gruss
Henry

[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

[Henry]

Hallo Matthias,

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.

puhhh, das scheint wohl eine Kunst für sich zu sein. Muss ich mich wohl doch erst mal einlesen.

<?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>

Du scheinst ja fit darin zu sein. Wie hast du das so schnell umsetzen können? Wenn ich mir den Quelltext von svg-Dateien anschaue und vor allem die Pfade, dann verstehe ich leider (noch) gar nichts, ausser dem rudimentären.

Et voilà:

Zwar noch keine sauberen Linien aber dafür unglaublich schnell umgesetzt.

Danke für die Infos.

Gruss
Henry

[Matthias Scharwies]

Servus!

Hallo Matthias,

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.

puhhh, das scheint wohl eine Kunst für sich zu sein. Muss ich mich wohl doch erst mal einlesen.

<?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>

Du scheinst ja fit darin zu sein. Wie hast du das so schnell umsetzen können? Wenn ich mir den Quelltext von svg-Dateien anschaue und vor allem die Pfade, dann verstehe ich leider (noch) gar nichts, ausser dem rudimentären.

Ich habe nur diese XML-Attribute fill="none" stroke="blACK" stroke-width="15"eingefügt. Hätte man auch als CSS machen können.

Das ist wie HTML, wirklich! Lies Dir mal das durch:

SVG/Tutorials/Einstieg

Mich hat bei dem Vivus-Bild mehr das doppelte style-Element, dessen CSS-Regelsätze ohne Leerzeichen und Zeilenumbrüche waren und dass vom Seiteninspektor grau dargestellt wurde, irritiert.

Et voilà:

Zwar noch keine sauberen Linien aber dafür unglaublich schnell umgesetzt.

Das ist genau das Problem. SVG entwickelt seine volle Stärke, wenn man die Grafiken mit Grundformen darstellt. Hier würde ich das Muster neu zeichnen:

• ein Pfad mit einem Kreisbogen und einem Deko-Haken,
• dann das ganze immer wieder mit use aufrufen, passend rotiert und verschoben. Mach ich in den nächsten Tagen mal fertig.

Auch das Yin-Yang ist falsch gezeichnet:

 <g transform="translate(0 -452.36)">
  <path d="m398.55 990.11c-67.554-0.7325-122.38-53.697-122.38-118.96s54.826-118.22 122.38-118.49 122.38-53.233 122.38-118.49-54.826-118.22-122.38-119.55c-130.44-1.3228-236.3 105.48-236.3 237.08s105.86 238.41 236.3 238.41z" fill="url(#a)" stroke="#000" stroke-width="7.6545"/>
  <path d="m401.45 514.61c67.554 0.7325 122.38 53.697 122.38 118.96s-54.826 118.22-122.38 118.49-122.38 53.233-122.38 118.49 54.826 118.22 122.38 119.55c130.44 1.3228 236.3-105.48 236.3-237.08s-105.86-238.41-236.3-238.41z" fill="url(#b)" stroke="#000" stroke-width="7.6545"/>
  <g opacity=".828">
   <path transform="matrix(3.5504 0 0 3.4298 874.43 -125.71)" d="m-125.81 288.98a7.6383 7.6383 0 1 1 -15.277 0 7.6383 7.6383 0 1 1 15.277 0z"/>
   <path transform="matrix(3.5504 0 0 3.4298 874.43 -365.71)" d="m-125.81 288.98a7.6383 7.6383 0 1 1 -15.277 0 7.6383 7.6383 0 1 1 15.277 0z" fill="#fff"/>
  </g>
 </g>

Hier eine bessere Variante (auf Wikimedia gefunden)

  <circle r="39"/>
  <path d="M0,38 
           a38,38 0 0 1 0,-76 
           a19,19 0 0 1 0,38 
           a19,19 0 0 0 0,38" 
        fill="#fff" />
  <circle r="5" cy="19" fill="#fff"/>
  <circle r="5" cy="-19"/>

Drei Kreise und ein Pfad. Dieser setzt den Stift bei M0,38 auf und zeichnet drei Kreisbögen mit dem a-Command:

1. weniger Markup
2. saubere Kurven
3. Mit CSS stylebar (Randlinie, Stärke, Farbe, Strichelung)

Danke für die Infos.

Gruss
Henry

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

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

Wie kann man einen gezeichneten Kreis mit Farbe füllen?

Eine Animation der fill-Eigenschaft von none auf red würde ja sprunghaft erscheinen. Ich hab mal eine CSS-Animation von fill-opacity gemacht. Rechts gibt es zwei SMIL-Animationen, die ich eigentlich vermeiden wollte.

(Um Animation zu wiederholen; Grafik im neuen Tab laden!)

Hat jemand noch Ideen?

Ein zweites Element, dessen Pfad animiert wird, wäre auch zu schwierig, um die Funktionsweise zu erklären.

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Hat jemand noch Ideen?

Den rechten Effekt könnte man so erreichen.

@keyframes lens {
   0% {
       r: 50px;
       stroke-width:1;
    }
 100% { 
       r: 0px;
       stroke-width:50;
    }
}

(Firefox benötigt die px-Angabe bei Geometrie-Attributen auch für dimensionslose Einheiten)

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus,

ich habe in diesem Tutorial ein kleines Script, das tut, was es soll.

getTotalLength() wirft aber einen Uncaught TypeError, warum auch immer. Wsl. liegt es daran, dass diese Methode ursprünglich Teil der Schnittstelle SVGPathElement war und nur auf Pfade zutraf. Mit SVG 2 wurde die Schnittstelle SVGGeometryElement eingeführt und die Methode dorthin verschoben. So können Sie auch die Randlängen anderer Grundformen feststellen.

Ich habe im ToDo einige SO-Fragen verlinkt, bin aber nicht auf eine Antwort gekommen. Es wäre supernett, wenn mir jemand helfen könnte!

Evtl. sollte ich noch getPointAtLength() einbauen, aber erst muss es fehlerfrei funktionieren.

Vielen Dank im Voraus

Matthias Scharwies

[Rolf B]

Hallo Matthias,

wenn Du mouseover auf dem SVG Element registrierst, muss es ja krachen, sobald die Maus nicht auf einem Geometrieelement ist. Das Event wird dann für das <svg> Element geworfen.

rect, circle, polyline, polygon und path sind SVGGeometryElement und erben von SVGGraphicsElement, aber <svg> erbt direkt von SVGGraphicsElement und kennt die Methode deshalb nicht.

document.addEventListener('DOMContentLoaded', function () {
  const svg = document.querySelector('svg'),
        result = document.getElementById('result');
	svg.addEventListener('mouseover', findPathLength);
	svg.addEventListener('click', findPathLength);

  function findPathLength(event) {
    const elem = event.target;
    if (elem && elem.getTotalLength) {
      const aidi = elem.id,
            length = elem.getTotalLength();

      result.textContent = 'Die Pfadlänge für die id "' + aidi + 
                           '" beträgt: ' + length + 
                           ' dimensionslose Einheiten.';
    } else {
      result.textContent = 'Bewege die Maus auf ein Geometrie-Element';
    }
  }
});

Ich habe das Beispiel gefixt. Kann man die Vorschau eigentlich höher machen? Die Textausgabe ist nur sichtbar wenn man scrollt.

Ob getPointAtLength hier sinnvoll ist, weiß nicht nicht. Zumindest sollte man dann noch eine Idee andeuten, warum man das tun sollte (Grafiktool: verschiebe Pfad 2 so, dass sein Anfangspunkt mit dem Endpunkt von Pfad 1 zusammenfällt). Man kann auch einen kleinen Punkt auf den Anfangspunkt und einen etwas größeren Kreis auf den Endpunkt malen (bzw. schieben).

Update: Hab ich auch mal eingebaut 😀

By The Way hat async bei inline-Scripten keinen Effekt (und würde bei einem externen Script eine race condition mit DOMContentLoaded erzeugen, guckst Du hier. Ich habe async entfernt.

Rolf

[Matthias Scharwies]

Servus!

Ich habe das Beispiel gefixt.

vielen, vielen Dank! Bin wieder in der Schule und versuche alle Schüler wiederzuerkennen.

Kann man die Vorschau eigentlich höher machen? Die Textausgabe ist nur sichtbar wenn man scrollt.

Ich habe sie nach oben gesetzt.

Alles andere später!

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Ich habe sie nach oben gesetzt.

Glück gehabt 👁️👃👁️.
Wir haben parallel am Beispiel herumeditiert

Rolf