Kreis (circle), Ellipse (ellipse) und Bogenkurve (Arc)

circle und ellipse sind wie rect, path und line sind Grundelemente von SVG.

SVG Bogenkurve (arc) werden als Pfad mit dem d-Attribut angelegt, für Kreise (circle) und Ellipsen (ellipse) hat SVG spezielle Tags im Repertoire.

Circle / Kreis

Kreise werden in SVG durch ihren Mittelpunkt und ihren Radius bestimmt.

(170,200) 160 160
<circle cx="170" cy="200" r="160" fill="ivory" stroke="orange" />

Ellipse

Ellipsen sind eng verwand mit Kreisen. Der Unterschied liegt im Radius – für eine Ellipse werden zwei Radius-Angaben gesetzt, x-Radius und y-Radius.

(170,200) 180 150
  1. cx ist die x-Koordinate des Mittelpunkts
  2. cy ist die y-Koordinate des Mittelpunkts
  3. rx horizontaler Radius
  4. ry vertikaler Radius

Die Reihenfolge der Attribute spielt keine Rolle.

<ellipse cx="170" cy="200" rx="150" ry="180" fill="ivory" stroke="orange" />

Bogenkurven

Zu den speziellen Anweisungen für das SVG path-Attribut d gehört auch auch eine einfache Formel für Kreisbögen oder Bogenkurven.

  1. Radius der x-Achse der Ellipse
  2. Radius der y-Achse der Ellipse
  3. Rotation der x-Achse der Ellipse in Grad (0: keine Rotation)
  4. large-arc-flag:
    kurzer Weg um die Ellipse: 0
    langer Weg um die Ellipse: 1
  5. sweep-flag:
    Zeichnung entgegen den Uhrzeigersinn: 0
    Zeichnung mit dem Uhrzeigersinn: 1
  6. (x y)-Koordinaten des Endpunktes

Die Reihenfolge der Werte muss eingehalten werden.

(280,79) (85,350) (674,79) (582,350)
<ellipse cx="170" cy="200" rx="150" ry="180" fill="ivory" />

                                    +--- x-Endpunkt
                                    |  
         gegen Uhrzeigersinn ---+   |   +--- y-Endpunkt
                                |   |   |
<path d="M 85 350 A 150 180 0 0 0  280 79" stroke="red" fill="none"/>
                     |   |  | |
 1 Radius x-Achse ---+   |  | +--- 4 kurzer / langer Weg
                         |  |
     2 Radius y-Achse ---+  +--- 3 Rotation x

Und die zweite Ellipse bzw. der zweite Bogen:

<ellipse cx="540" cy="200" rx="150" ry="180" transform="rotate(45 540 200)" />
<path d="M 674 79 A 150 180 45 1 0 582 350" stroke="red" fill="none"/>

SVG Kreisbogen

Ein Kreisbogen entsteht auf dieselbe Weise wie die Bogenkurve für Ellipsen, nur dass x- und -y-Radius gleich sind.

SVG Bogenkurven mit Javascript

Bogenkurven wären perfekt für Tortengrafiken.

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

Quelle How to calculate the SVG Path for an arc (of a circle)

Gerade für Tortengrafik könnten konische Verläufe das Rechnen für Bogenkurven ersparen. Aber einen konischen Verlauf mit CSS gibt es zur Zeit nur in Chrome.