CSS, HTML & Javascript mit {stil}

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

circle und ellipse sind wie rect, path und line Grundelemente von SVG. SVG Bogenkurven (arc) werden als Pfad mit dem d-Attribut angelegt, für Kreise (circle) und Ellipsen (ellipse) hat SVG spezielle Tags im Repertoire.

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

Circle / Kreis

Für Kreise und Ellipsen hat SVG eigene Elemente: Kreise werden in SVG im circle-Element durch ihren Mittelpunkt und ihren Radius bestimmt.

(170,200)160160 
<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)180150
  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 (na ja …) 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.

SVG ARC Ellipse 
<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.

Drei Bogenkurven auf Kreisen
Rastergröße 20: Bogenkurven für ein Online-Symbol
<g stroke="gray" fill="none" stroke-width="3">
   <circle cx="170" cy="200" r="150" />
   <circle cx="170" cy="200" r="105" />
   <circle cx="170" cy="200" r="60" />
</g>

<g stroke="red" fill="none" stroke-width="30" stroke-linecap="round">
   <path d="M 70 90 A 150 150 0 0 1 270 90" />
   <path d="M 100 125 A 105 105 0 0 1 240 125" />
   <path d="M 130 160 A 60 60 0 0 1 210 160" />
</g>

<circle cx="170" cy="200" r="25" fill="red" />

Abschätzen ist eine Methode, um die Endpunkte der Bogenpunkte festzulegen. Genauer funktioniert der Kreisbogen mit Javascript und der Umrechnung in Polarkoordinaten.

Kreis / Ellipse als SVG-Path

Wenn ein SVG-Pfad gebraucht wird, können Kreise und Ellipsen als Pfad geschrieben werden. Der Pfad wird nicht vom Mittelpunkt aus beschrieben, sondern im Uhrzeigersinn vom äußerst rechten Punkt aus oder gegen den Uhrzeigersinn vom äußerst linken Punkt aus.

Kreis / Ellipse als SVG-Pfad 
<path d="m50 200a150 150 0 1 1 0 1z" … />
<path d="m400 200a175 125 0 1 1 0 1z" … />

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 für HTML-Elemente.

Suchen auf mediaevent.de