Wie erstelle ich gestrichelte Kreise mit gleichmäßigem Abstand?

16

Ich wollte mit CSS einen gepunkteten Kreis erstellen und ihn mit dem folgenden Prozess erstellen.

Obwohl der gestrichelte Kreis durch diesen Vorgang angezeigt werden konnte, wurde die Lücke zwischen dem Ende und dem Anfang der gestrichelten Linie eng und die Lücke war nicht gleichmäßig.

.c {
  width: 500px;
  height: 500px;
  border-width: 15px;
  border-style: dashed;
  border-radius: 600px;
}
<div class="c"></div>
Erweitern Sie das Snippet

Gibt es eine Möglichkeit, die Lücke zu vereinheitlichen? Können wir auch die Lücke zwischen Bindestrichen kontrollieren?

Wenn dies mit CSS allein nicht möglich ist, ziehen wir die Verwendung von JavaScript oder Ähnlichem in Betracht.

javascript html css Temani Afif
quelle
4
Für das, was es wert ist, scheint nur Chrome (und Klone, denke ich) Probleme mit Ihrem Code zu haben.
Álvaro González
3
Ja. Sieht gut aus für mich
Strawberry

Antworten:

14

Hier ist eine optimierte Version der conic-gradient()Lösung, mit der Sie die Anzahl der Striche und den Abstand dazwischen einfach steuern können

Code-Snippet anzeigen

Um volle Transparenz zu haben, betrachten wir mask

Code-Snippet anzeigen

CSS gestrichelter Kreis mit einheitlichem Abstand

Um die Dinge lustig zu machen , können wir sogar eine komplexere Färbung der Striche in Betracht ziehen:

Code-Snippet anzeigen

Transparente CSS-Striche mit Kegelverlauf und Maske

Möglicherweise möchten Sie sicher etwas Inhalt darin haben, also wenden Sie die Maske / den Hintergrund besser auf ein Pseudoelement an, um zu vermeiden, dass der Inhalt maskiert wird:

Code-Snippet anzeigen

Verwandte Frage, um mehr CSS-Ideen zu erhalten, um ein ähnliches Ergebnis zu erzielen: Nur CSS-Kreisdiagramm - Wie füge ich Abstand / Abstand zwischen Slices hinzu? . Sie finden mehr unterstützte Möglichkeiten alsconic-gradient() (tatsächlich funktioniert es unter Firefox nicht), aber Sie müssen im Gegensatz zu der oben genannten Lösung, bei der nur ein Element benötigt wird, viel Code verwenden.

Bei Verwendung von SVG benötigen Sie auch einige Berechnungen, um sicherzustellen, dass Sie einen einheitlichen Abstand haben:

svg {
  width:200px;
}
<svg viewBox="-3 -3 106 106">
  <!-- 
    The circumference of the circle is 2*PI*R ~ 314.16
    if we want N dashed we use d=314.16/N
    For N = 20 we have d=15.71
    For a gap of 5 we will have "10.71,5" (d - gap,gap)
  -->
  <circle cx="50" cy="50" r="50" 
    stroke-dasharray="10.71, 5" 
    fill="transparent" 
    stroke="black" 
    stroke-width="5" />
</svg>
Erweitern Sie das Snippet

Mit CSS-Variablen können wir es einfacher machen, aber es wird nicht im gesamten Browser unterstützt (tatsächlich funktioniert es in Firefox nicht).

Code-Snippet anzeigen

SVG Uniform Space Striche

Wir können die SVG auch leicht als Hintergrund verwenden, um die Dinge flexibler zu gestalten:

Code-Snippet anzeigen

Bei Verwendung als Hintergrund müssen Sie den Wert manuell einstellen, damit Sie jedes Mal einen anderen Hintergrund benötigen. Wir können die Farbe nur leicht ändern, wenn wir das SVG als Maske verwenden.

Code-Snippet anzeigen

SVG gestrichelter Rand mit einheitlichem Abstand

Temani Afif
quelle
1
Während dies interessante Möglichkeiten sind, dies in Chrome gut zu machen, funktioniert in Firefox nur Ihre erste grundlegende SVG-Version. Insbesondere unterstützt Firefox (auch die Nightly-Version) conic-gradient()oder nicht repeating-conic-gradient(). Dies könnte also in Zukunft ein praktikabler Ansatz sein, der jedoch derzeit nicht verwendet werden kann, wenn browserübergreifende Funktionen gewünscht werden.
Makyen
1
Angesichts der Tatsache, dass der Code der Frage OP in Firefox korrekt funktioniert (dh das angegebene Problem existiert nicht in Firefox), aber in Chrome, ist es wahrscheinlich eine gute Idee, die Unterschiede zwischen mindestens Chrome (+ Klone) und Firefox zu untersuchen. während Sie Code bereitstellen, der in beiden Fällen funktioniert (oder zumindest explizit angeben, was jetzt verwendet werden kann , dass Cross-Browser - Unterstützung hat).
Makyen
@Makyen Während der OP-Code in Firefox einwandfrei funktioniert, versuche ich mich auf die Steuerung des Lückenteils zu konzentrieren, da wir mit einem einfachen Rand die Lücken nicht kontrollieren können. Ich füge auch den Färbungsteil hinzu. Ich versuche es zu einer generischen Antwort zu machen. Was den Farbverlauf betrifft, fehlt Firefox zwar die Unterstützung, aber ich bin mir ziemlich sicher, dass dies bald geschehen wird (ich bin immer noch überrascht, dass sie zu spät dran sind, Chrome hat dies seit fast zwei Jahren unterstützt). Ich habe auf eine andere Frage verlinkt, um mehr Unterstützung zu erhalten, aber sie war nicht sehr explizit. Wird es aktualisieren.
Temani Afif
3

Verwendung stroke-dasharraymit SVG.

svg {
  width: 20vmax;
  height: 20vmax;
}
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="48" stroke-dasharray="10, 4" fill="transparent" stroke="purple" stroke-width="5" />
</svg>
Erweitern Sie das Snippet

Oder Sie können verwenden radial-gradient(),repeating-conic-gradient() Funktionen , ohne Firefox.

.c {
  width: 20vmax;
  height: 20vmax;
  background-image: radial-gradient(#fff 68%, transparent 68% 70%, #fff 70%),
    repeating-conic-gradient(#000 0% 3%, transparent 3% 5%);
}
<div class="c"></div>
Erweitern Sie das Snippet

Sanriot
quelle
3
conic-gradientwird aus irgendeinem Grund
zackig