<circle>

Baseline Widely available *

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

* Some parts of this feature may have varying levels of support.

Das<circle>SVG-Element ist eineSVG-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 sindcx,cy undrGeometrieeigenschaften, was bedeutet, dass diese Attribute auch als CSS-Eigenschaften für dieses Element verwendet werden können.

DOM-Schnittstelle

Dieses Element implementiert dieSVGCircleElement-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>

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen •Fehler mit dieser Übersetzung melden

Movatterモバイル変換