Circle

Ein Kreis wird mit <circle cx="40" cy="40" r="30"></circle> gezeichnet. Die Atribute cx, cy und r werden benötigt.

cx = Abstand von Links

cy = Abstand von Oben

r = Radius

cx und cy stellen den Mittelpunkt des Kreises dar. Um diesen wird mit Radus r der Kreis herumgezeichnet. Man kann sich das so vorstellen wie mit dem Zirkel auf einem Blatt Papier. cx und cy ist der Punkt an dem mit der Zirkelspitze in das Papier gestochen wird um mit dem Radus r einen Kreis drumherum zu zeichnen.

Das x in der Mitte stellt cx, cy dar.

<svg height="200px" width="100%">
   <circle cx="40" cy="40" r="30" style="fill: lightblue; stroke: #000; stroke-width: 1px;"></circle>
</svg>

Mehr gibt es zum Kreis auch nicht zu sagen. Deshalb kommen wir gleich zur Ellipse.

Ellipse

Im grunde ist eine Ellipse ein Kreis der in die Länge gezogen wurde. Wie der Kreis auch benötigen wir auch hier eine cx und eine cy Koordinate um die die Ellipse gezeichnet wird.

Im gegensatz zum Kreis benötigen wir aber zwei Radien. Einen für die x Achse und ein für die y Achse.

<svg height="200px" width="100%">
   <ellipse cx="80" cy="40" rx="70" ry="30" style="fill: lightblue; stroke: #000; stroke-width: 1px;"></ellipse>
</svg>