Kurze Frage: Mit dem SVG-Pfad können wir 99,99% eines Kreises zeichnen und er wird angezeigt. Wenn es sich jedoch um 99,99999999% eines Kreises handelt, wird der Kreis nicht angezeigt. Wie kann es behoben werden?
Der folgende SVG-Pfad kann 99,99% eines Kreises zeichnen: (Versuchen Sie es unter http://jsfiddle.net/DFhUF/1381/ und prüfen Sie, ob Sie 4 oder nur 2 Bögen sehen. Beachten Sie jedoch, dass es sich um einen IE handelt in VML gerendert, nicht SVG, aber mit dem gleichen Problem)
M 100 100 a 50 50 0 1 0 0.00001 0
Aber wenn es 99,99999999% eines Kreises ist, wird dann überhaupt nichts angezeigt?
M 100 100 a 50 50 0 1 0 0.00000001 0
Und das ist auch bei 100% eines Kreises so (es ist immer noch ein Bogen, nicht wahr, nur ein sehr vollständiger Bogen)
M 100 100 a 50 50 0 1 0 0 0
Wie kann das behoben werden? Der Grund dafür ist, dass ich eine Funktion verwende, um einen Prozentsatz eines Bogens zu zeichnen, und wenn ich einen 99,9999% oder 100% Bogen "Sonderfall" machen muss, um die Kreisfunktion zu verwenden, wäre das irgendwie albern.
Ein Testfall für jsfiddle mit RaphaelJS finden Sie unter http://jsfiddle.net/DFhUF/1381/
(und wenn es sich um VML in IE 8 handelt, wird selbst der zweite Kreis nicht angezeigt ... Sie müssen ihn ändern 0,01)
Aktualisieren:
Dies liegt daran, dass ich einen Bogen für eine Punktzahl in unserem System rendere, sodass 3,3 Punkte 1/3 eines Kreises erhalten. 0,5 ergibt einen halben Kreis und 9,9 Punkte ergeben 99% eines Kreises. Aber was ist, wenn es in unserem System Werte gibt, die 9,99 betragen? Muss ich überprüfen, ob es sich um 99,999% eines Kreises handelt, und eine arc
Funktion oder eine circle
Funktion entsprechend verwenden? Was ist dann mit einer Punktzahl von 9.9987? Welches verwenden? Es ist lächerlich zu wissen, welche Art von Partituren einem "zu vollständigen Kreis" zugeordnet und zu einer Kreisfunktion gewechselt werden. Wenn es sich um "bestimmte 99,9%" eines Kreises oder eine 9,9987-Partitur handelt, verwenden Sie die Bogenfunktion .
Antworten:
Gleiches gilt für den XAML-Bogen. Schließen Sie einfach den 99,99% -Bogen mit a
Z
und Sie haben einen Kreis!quelle
z
am Ende ein und fertig. Möglicherweise müssen Sie Nullen entfernen, zum Beispiel musste ich im neuesten Chrome schreiben0.0001
, damit es funktioniert. Wenn Sie suchen, wo die Pfadzeichenfolge abgelegt werden soll, sehen Sie sich Pfade auf MDN an .Ich weiß, dass es etwas spät im Spiel ist, aber ich erinnerte mich an diese Frage, als sie neu war und ich ein ähnliches Dillemma hatte, und fand versehentlich die "richtige" Lösung, wenn noch jemand nach einer sucht:
Mit anderen Worten:
kann als ein Weg damit erreicht werden:
Der Trick besteht darin, zwei Bögen zu haben, wobei der zweite dort aufnimmt, wo der erste aufgehört hat, und den negativen Durchmesser verwendet, um zum ursprünglichen Bogenstartpunkt zurückzukehren.
Der Grund, warum es nicht als vollständiger Kreis in einem Bogen gemacht werden kann (und ich spekuliere nur), ist, dass Sie ihm sagen würden, er solle einen Bogen von sich selbst (sagen wir 150.150) zu sich selbst (150.150) zeichnen, den er rendert als "oh, ich bin schon da, kein Lichtbogen nötig!".
Die Vorteile der von mir angebotenen Lösung sind:
Nichts davon wäre von Bedeutung, wenn nur Textpfade Formen akzeptieren könnten. Aber ich denke, sie vermeiden diese Lösung, da Formelemente wie Kreise technisch gesehen keinen "Startpunkt" haben.
jsfiddle-Demo: http://jsfiddle.net/crazytonyi/mNt2g/
Aktualisieren:
Wenn Sie den Pfad als
textPath
Referenz verwenden und möchten, dass der Text am äußeren Rand des Bogens gerendert wird, verwenden Sie genau dieselbe Methode, ändern jedoch das Sweep-Flag von 0 auf 1, sodass die Außenseite des Bogens behandelt wird Pfad als Oberfläche statt nach innen (stellen Sie sich vor,1,0
jemand sitzt in der Mitte und zeichnet einen Kreis um sich selbst, während1,1
jemand in Radiusentfernung um die Mitte geht und seine Kreide neben sich zieht, wenn dies hilfreich ist). Hier ist der Code wie oben, aber mit der Änderung:quelle
In Bezug auf Anthonys Lösung ist hier eine Funktion, um den Pfad zu erhalten:
quelle
Ein ganz anderer Ansatz:
Anstatt mit Pfaden zu fummeln, um einen Bogen in svg anzugeben, können Sie auch ein Kreiselement nehmen und ein Strich-Dasharray im Pseudocode angeben:
Die Einfachheit ist der Hauptvorteil gegenüber der Methode mit mehreren Bogenpfaden (z. B. wenn Sie beim Erstellen von Skripten nur einen Wert eingeben und für jede Bogenlänge fertig sind)
Der Bogen beginnt am äußersten rechten Punkt und kann mithilfe einer Drehtransformation verschoben werden.
Hinweis: Firefox hat einen seltsamen Fehler, bei dem Drehungen über 90 Grad oder mehr ignoriert werden. Um den Bogen von oben zu starten, verwenden Sie:
quelle
stroke-dasharray="0 10cm 5cm 1000cm"
es möglich, die Transformation zu vermeidenAdobe Illustrator verwendet Bezierkurven wie SVG und erstellt für Kreise vier Punkte. Sie können einen Kreis mit zwei elliptischen Bogenbefehlen erstellen ... aber für einen Kreis in SVG würde ich ein
<circle />
:) verwendenquelle
circle
finden Sie stattdessen im Update in der Frage.arc
, um einen vollen Kreis mit dem linken und dem rechten Bogen zu erstellen? Der Bogen kann also keinen vollständigen Kreis zeichnen ... dazu sind zweiarc
Pfade erforderlichEs ist eine gute Idee, mit zwei Bogenbefehlen einen vollen Kreis zu zeichnen.
Normalerweise benutze ich eine Ellipse oder ein Kreiselement, um einen vollen Kreis zu zeichnen.
quelle
Aufbauend auf den Antworten von Anthony und Anton habe ich die Möglichkeit integriert, den generierten Kreis zu drehen, ohne das gesamte Erscheinungsbild zu beeinträchtigen. Dies ist nützlich, wenn Sie den Pfad für eine Animation verwenden und steuern müssen, wo sie beginnt.
quelle
Für diejenigen wie mich, die nach Ellipsenattributen für die Pfadkonvertierung suchten:
quelle
Als Funktion geschrieben sieht es so aus:
quelle
<circle>
, müssen Sie die Richtung nach Osten, Süden ändern, Westen, Norden:"M" + cx + "," + cy + "m" + (r) + ",0" + "a" + r + "," + r + " 0 1,1 " + (-r * 2) + ",0" + "a" + r + "," + r + " 0 1,1 " + (r * 2) + ",0"
Der Vorteil ist , dassstroke-dashoffset
undstartOffset
jetzt die gleiche Art und Weise arbeiten.Diese Antworten sind viel zu kompliziert.
Eine einfachere Möglichkeit, dies zu tun, ohne zwei Bögen zu erstellen oder in verschiedene Koordinatensysteme zu konvertieren.
Dies setzt voraus, dass Ihr Leinwandbereich Breite
w
und Höhe hath
.Verwenden Sie einfach die Flagge "Langer Bogen", damit die volle Flagge gefüllt ist. Machen Sie dann die Bögen zu 99,9999% zum vollen Kreis. Optisch ist es das gleiche. Vermeiden Sie die Sweep-Flagge, indem Sie den Kreis am äußersten rechten Punkt des Kreises beginnen (ein Radius direkt horizontal von der Mitte).
quelle
Eine andere Möglichkeit wäre die Verwendung von zwei kubischen Bezierkurven. Dies ist für iOS- Benutzer gedacht, die PocketSVG verwenden, das den Parameter svg arc nicht erkennt.
C x1 y1, x2 y2, xy (oder c dx1 dy1, dx2 dy2, dx dy)
Der letzte Satz von Koordinaten hier (x, y) ist der Punkt, an dem die Linie enden soll. Die anderen beiden sind Kontrollpunkte. (x1, y1) ist der Kontrollpunkt für den Beginn Ihrer Kurve und (x2, y2) für den Endpunkt Ihrer Kurve.
quelle
Ich habe eine Jsfiddle gemacht, um es hier zu tun:
Verknüpfung
Alles, was Sie tun müssen, ist, die Eingabe von console.log zu ändern und das Ergebnis in console zu erhalten
quelle