Weiß jemand, wie man einen animierten Bogen / Kreis in SVG definiert, so dass der Bogen bei 0 Grad beginnt und bei 360 Grad endet?
Eine Möglichkeit besteht darin, einen Kreis zu verwenden und den Strich-Strich-Offset zu animieren 'stroke-dasharray' auch). Ein Beispiel für eine solche Animation (nicht mit einem Kreis, aber das gleiche Prinzip gilt) kann hier .
Die andere Option besteht darin, eine Pfadanimation und Bogensegmentsegmente zum Animieren zu verwenden / Morphing zwischen Pfaden finden Sie in diesem Beispiel .
Oder vielleicht könnten Sie einen vorgezeichneten Kreis aufdecken, um den gewünschten Effekt zu erzielen:
%Vor%Ich war auch ein bisschen enttäuscht, um nicht einfach einen Kreisbogen mit einem Prozent oder einem Winkel machen zu können.
Heutzutage, wenn ich einen Bogen brauche, der nicht Teil eines längeren Pfades ist, benutze ich einen Kreis und einen Schlag, um nur einen Teil dieses Kreises zu zeigen.
Sie können hier eine verbesserte Version hier sehen, die Sass für Berechnungen verwendet.
Sie können die SVG auch manuell mit circle und der folgenden Technik zeichnen:
circle a stroke . stroke dashed mit einer Strichlänge gleich dem Umfang des Kreises. stroke um eine Länge, die dem Umfang des Kreises entspricht. HTML:
%Vor%CSS:
%Vor%Quelle: Ссылка
Danke für die Antworten - hier ist ein wenig mehr Informationen darüber, warum ich einen Kreis in SVG animieren möchte:
Wir haben eine Server-Client-Anwendung. Ich plane, SVG-Bilder zu generieren, um Diagramme (Tortendiagramme / Balkendiagramme) auf dem Server darzustellen und das SVG an die Clients zu senden. Wir haben Java- und .NET-Clients. Ich werde clientseitigen Code schreiben, um die vom Server empfangenen SVG-Bilder zu analysieren und zu rendern. Ich plane, nur eine Teilmenge des SVG-Formats zu verwenden - nicht mehr als das, was wir für unsere Diagramme benötigen, aber Animation ist eine Voraussetzung.
Langfristig wäre es schön, einen Ajax-Client zu haben - der auf Browsern ohne Java oder .NET-Laufzeit läuft. Deshalb habe ich das SVG-Format gewählt.
Für eine kurzfristige Lösung denke ich jetzt, dass ich mein eigenes Element zum SVG hinzufügen werde, indem ich einen Bogen mit Start- und Schwenkwinkeln definiere. Dann kann ich leicht die Animation definieren, die ich benötige, indem ich den Schwenkwinkel animiere, und meine Implementierung einfach machen.
Langfristig - wenn wir wirklich einen AJAX / HTML-Client implementieren wollen - muss ich den SVG-Standard neu implementieren und einhalten.
Tags und Links animation svg circle geometric-arc