<circle>
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Das <circle>
SVG-Element ist eine SVG-Grundform, die verwendet wird, um Kreise basierend auf einem Mittelpunkt und einem Radius zu zeichnen.
Verwendungskontext
Kategorien | Grundformelement, Grafikelement, Formelement |
---|---|
Erlaubter Inhalt | Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Animationselemente Beschreibende Elemente |
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 gleich oder kleiner als null deaktiviert die Darstellung des Kreises. Werttyp: <length> | <percentage>; Standardwert:
0
; Animierbar: ja pathLength
-
Die Gesamtlänge des Kreisumfangs in Benutzereinheiten. Werttyp: <number>; Standardwert: none; Animierbar: ja
Hinweis:
Ab SVG2 sind cx
, cy
und r
Geometrieeigenschaften, was bedeutet, dass diese Attribute auch als CSS-Eigenschaften für dieses Element verwendet werden können.
DOM-Schnittstelle
Dieses Element implementiert die SVGCircleElement
-Schnittstelle.
Beispiel
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" />
</svg>
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # CircleElement |
Browser-Kompatibilität
Siehe auch
- Andere SVG-Grundformen:
<ellipse>
,<line>
,<polygon>
,<polyline>
,<rect>