SVG/Element/circle

Das circle-Element definiert einen Kreis in SVG.

Syntax

Start-Tag: notwendig

End-Tag: ggf. notwendig

Elternelemente

Darf vorkommen in:
jedem Element, das fließenden Inhalt erlaubt.

erlaubte Inhalte

animate, animateMotion, animateTransform, set, title (dann wird ein End-Tag nötig)

Attribute

Name	Inhalt	Standardwert	Bedeutung
cx	NUMBER	0px	X-Position der Mitte
cy	NUMBER	0px	Y-Position der Mitte
r	NUMBER	Pixelwert	Radius
systemLanguage	IANA		Sprachkürzel
transform	CDATA

Attribut: Pflichtattribut
Attribut: optionales Attribut

Beispiel ansehen …

<circle class="eins" r="100" />
<circle class="eins" cx="190" cy="70" r="50" />
<circle class="zwei" cx="100" cy="200" r="20" />
<circle class="drei" cx="400" cy="100" r="50" />

Auch die blaue Figur ist ein Kreis! Verändern Sie die Werte für fill, stroke, stroke-width und stroke-dasharray.

Beachten Sie: Wenn Sie für cx und cy keine Angaben machen, wird der Kreis um den Punkt 0,0 herum gezeichnet.

Empfehlung: Sie können sowohl Farben und Randlinien als auch die Geometrieattribute cx, cy und r im Stylesheet definieren.

Siehe auch

• SVG/Tutorials/Einstieg/Grundformen
  • Kreise und Linien
• Geometrie-Attribute

Weblinks

• W3C: CircleElement