Was ich mache, ist einen Strich zu animieren, indem ich zuerst sein stroke-dasharrayund setze stroke-dashoffsetund dann seinen animiere stroke-dashoffset, so dass der Strich aussieht, als würde er in Echtzeit von einer unsichtbaren Hand gezeichnet.
Linienanimationen erfordern jedoch Striche, da Pfade verhindern stroke-dasharrayund stroke-dashoffsetkeine merkliche Wirkung haben.
Ich brauche einen Strich mit einer Breite von genau 1pxeinem perfekten Viertelkreis.
Aber da ich schlecht darin bin, perfekt gekrümmte Striche einer bestimmten Breite zu erstellen, weiß ich nur, wie ich dies erreichen kann, indem ich einen Pfad aus einem Kreisobjekt erstelle.
Ist es möglich, einen Pfad in einen Strich umzuwandeln?
Gibt es eine andere Möglichkeit, einen perfekten Viertelkreisstrich mit einer Breite von einem Pixel zu erstellen, als den Code einfach selbst zu schreiben?
In Inkscape konvertiert das Muster entlang des Pfads einen Pfad so, dass er entlang eines Pfads wiederholt oder gestreckt wird, wodurch er effektiv wie ein Strich wird. Dokumentation finden Sie hier:
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Paths-LivePathEffects-PatternAlongPath.html
Sie können dies auch verwenden, um Striche mit benutzerdefinierten "Kappe"-Formen (z. B. einem Viertelkreis) zu versehen, wenn die üblichen "gerundeten" und "eckigen" Optionen auf der Registerkarte "Strichstil" nicht gut genug für Sie sind.
Klingt jedoch so, als ob Ihr ultimatives Ziel darin besteht, den SVG-Pfad nur so zu animieren, dass er aussieht, als würde er von einer unsichtbaren Hand gezeichnet. In diesem Fall würde ich empfehlen, nur den Pfad zu zeichnen und ihn dann mit vivus.js zu animieren. Dokumentation für vivus finden Sie hier:
stroke-dasharrayauf eingestellt ist 'WIDTH-OF-ELEMENT'px, erscheint es nicht als gepunktete Linie, sondern immer als durchgezogene Linie. Mit anderen Worten, Sie haben einen Strich von 10px, aber 5pxdieser Strich ist nur ein leerer Raum. Ich habe Mühe, die zweite Hälfte Ihres Kommentars zu verstehen.LENGTH-OF-STROKEpx. Zweitens implementiere ich das SVG als Inline-SVG im HTML-Format für die Verwendung im Web. Ich animiere es mit JavaScript. Alles, was ich wissen muss, ist, wie man mit dem Bezier - Werkzeug oder auf andere
Weise einen perfekten Viertelkreisstrich macht .
Luciano