<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

html,
body,
svg {
  height: 100%;
}

html

<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>