Ich bin ziemlich neu in der SVG-Welt und habe einige Probleme, wenn ich einen gekrümmten Pfeil "zeichnen" möchte.
Grundsätzlich möchte ich eine Animation erstellen, wie sie in diesem Artikel erklärt wurde, aber mit einer Form am Ende des Pfades, um einen Pfeil anzuzeigen.
Unten ist der Code, den ich für den geraden Pfeil verwende:
%Vor%
Mit ein bisschen CSS:
%Vor%Das Ergebnis ist unten:
Das ist cool, aber jetzt hätte ich gerne einen gekrümmten Pfeil. Also habe ich das animate-Tag wie folgt aktualisiert:
%Vor%Ich habe gerade den Pfad zum Animieren geändert, um einen gekrümmten Pfad zu haben. Aber das Ergebnis ist das folgende:
Ich denke, es ist logisch, aber es ist nicht das, was ich möchte. Der Marker bewegt sich gerade auf einer geraden Linie. Es sollte dem Zeichenpfad folgen.
Ich habe keine Ahnung, wie man das macht, um ehrlich zu sein, irgendwelche Vorschläge wären großartig:)
Hier finden Sie ein JSFiddle .
Wie Sie sehen, wird in diesen Experimenten kein JS verwendet, es wäre großartig, wenn wir diese Sprache vermeiden und einfach SVG + CSS verwenden könnten.
Vielen Dank im Voraus!
Ich bin ziemlich neu in der SVG-Welt und habe einige Probleme, wenn ich einen gekrümmten Pfeil "zeichnen" möchte.
Grundsätzlich möchte ich eine Animation erstellen, wie sie in diesem Artikel erklärt wurde, aber mit einer Form am Ende des Pfades, um einen Pfeil anzuzeigen.
Unten ist der Code, den ich für den geraden Pfeil verwende:
%Vor%
Mit ein bisschen CSS:
%Vor%Das Ergebnis ist unten:
Das ist cool, aber jetzt hätte ich gerne einen gekrümmten Pfeil. Also habe ich das animate-Tag wie folgt aktualisiert:
%Vor%Ich habe gerade den Pfad zum Animieren geändert, um einen gekrümmten Pfad zu haben. Aber das Ergebnis ist das folgende:
Ich denke, es ist logisch, aber es ist nicht das, was ich möchte. Der Marker bewegt sich gerade auf einer geraden Linie. Es sollte dem Zeichenpfad folgen.
Ich habe keine Ahnung, wie man das macht, um ehrlich zu sein, irgendwelche Vorschläge wären großartig:)
Hier finden Sie ein JSFiddle .
Wie Sie sehen, wird in diesen Experimenten kein JS verwendet, es wäre großartig, wenn wir diese Sprache vermeiden und einfach SVG + CSS verwenden könnten.
Vielen Dank im Voraus!
Ich denke, dass Sie diesen Artikel über SVG-Linienanimation sehr nützlich finden könnten: Ссылка
CSS:
%Vor%Demo davon in Aktion: Ссылка
Darin gibt es eine Einschränkung bezüglich JavaScript und die Länge der zu zeichnenden Linie zu bestimmen. Wenn Sie JS nicht verwenden möchten, können Sie herausfinden, welche Länge animiert werden soll, indem Sie die Werte desharray und deshoffset aktualisieren.