<circle>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Das <circle> SVG-Element ist eine grundlegende SVG-Form, die zum Zeichnen von Kreisen basierend auf einem Mittelpunkt und einem Radius verwendet wird.

Beispiel

html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" />
</svg>

Attribute

cx

Die x-Achsen-Koordinate des Mittelpunkts des Kreises. Werttyp: <length>|<percentage> ; Standardwert: 0; Animierbar: ja

cy

Die y-Achsen-Koordinate des Mittelpunkts des Kreises. Werttyp: <length>|<percentage> ; Standardwert: 0; Animierbar: ja

r

Der Radius des Kreises. Ein Wert kleiner oder gleich null deaktiviert die Darstellung des Kreises. Werttyp: <length>|<percentage> ; Standardwert: 0; Animierbar: ja

pathLength

Die Gesamtlänge des Kreisumfangs in Benutzereinheiten. Werttyp: <number> ; Standardwert: kein; Animierbar: ja

Hinweis: Ab SVG2 sind cx, cy und r Geometrie-Eigenschaften, das bedeutet, diese Attribute können auch als CSS-Eigenschaften für dieses Element verwendet werden.

Nutzungskontext

KategorienGrundformelement, Grafikelement, Formelement
Erlaubter InhaltBeliebige Anzahl folgender Elemente, in beliebiger Reihenfolge:
Animationselemente
Beschreibende Elemente

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# CircleElement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch