svg lernen

    ich glaube ich mach mal dafür neues thema auf,damit anndere leute da auch fragen können und nicht ewig suchen müssen.

    ich habe mir gedacht ich wage mich da mal ran und spiele etwas rum.


    wollte mein namen schreiben wie eine unterschrieft.

    dazu habe ich ein b und ein a erstellt.

    <path id="schrift"> und <path id="schrift1"> das b wird geschrieben,und da a nicht,was eigentlich klar ist weil nur schrift animiert ist.


    muss ich für jjeden buchstaben einzelnt animieren oder kann man path 1 uund 2 zusammen fummeln damit die anmation in eins durch geht ?

    FRAGE 2: meine animation ist auf 15 sekunden eingestellt,brauch aber n wirklichkeit mal gerade 4 sekunden,wo sind die sekunden hin?

    frage 3 . was heist "stroke-dashoffset:2000;"? wenn ich die werte ändere kommt nur müllbei raus ,sehe da kein system?

    frage4 .stroke-dasharray: 2000; was macht der wert?

    http://jsfiddle.net/basti1012/nswtbuzf/16/

    hier mein erster fehl versuch

    Interessantes Thema, das kannte ich noch gar nicht. Wie hast Du denn die Pfade erstellt?

    Zitat

    meine animation ist auf 15 sekunden eingestellt,brauch aber n wirklichkeit mal gerade 4 sekunden,wo sind die sekunden hin?

    Dazu musst Du dich über die dasharrays informieren:

    https://css-tricks.com/svg-line-animation-works/

    Der Trick besteht darin, dass man einen einzigen Dash erzeugt, der den ganzen Pfad abdeckt. Und weil dein dash bei einer Größe von 2000 viel länger ist als der Pfad, ist der Pfad schon nach 4 Sekunden sichtbar, obwohl die Animation länger läuft.

    Zitat

    muss ich für jjeden buchstaben einzelnt animieren oder kann man path 1 uund 2 zusammen fummeln damit die anmation in eins durch geht ?

    Für Animationen gibt es diverse Events. In diesem Fall ist "onanimationend" interessant, dieser feuert, wenn die Animation beendet ist und Du kannst damit die Animation des zweiten Buchstabens starten:

    http://jsfiddle.net/nswtbuzf/18/

    ich habe bei dir ja mal gesehen das du deine kreise über canvas und du hattest ja auch mal so nee unterschrift gemacht( hatte ich irgendwo mal gesehen).deshalb wollte ich mich da auch mal rein arbeiten und mal kucken ob ich das schecke.


    den pfad habe ich provisorisch auf der schnelle gemacht,weil wenn ich das übe muss es auch was eigenes sein.

    habe da ein online tool gefunden,der dir gleich den code gibt.


    https://svg-edit.github.io/svg….html?storagePrompt=false

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden