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

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

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

Es ist wahrhaft frustrierend, dass SVG bei circle keine Polarkoordinaten mit center und radius unterstützt. Bogenkurven wären perfekt für Tortengrafiken und Charts. So muss sich die Tortengrafik mit jeder Menge Javascript aufbauen.

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 Tortengrafiken würden konische Verläufe das Rechnen für Bogenkurven ersparen. Aber einen konischen Verlauf mit CSS gibt es zur Zeit nur in Chrome.