|
Inhalt: |
Pfad - <path... />, Ellipsenbogen: A (Elliptical Arc)
Mit dem Tag Pfad (path) <path... /> können in SVG u.a. [1] Ellipsenbogen gezeichnet werden. Anzugeben sind für die Ellipse die beiden Radien, die Rotation der X-Achse, welcher Teil und in welche Richtung gezeichnet werden soll, sowie Anfang und Endpunkt der Ellipse.
<path d="Mx1 y1 Arx ry alpha larg-arc-flag sweep-flag x4 y4" />
Im Einzelnen sind folgende Parameter anzugeben:
[2] M oder m: Startpunkt der Ellipse
[3] nach A oder a - Parameter des Ellipsenbogens:
[3A] rx: Radius der Ellipse auf der X-Achse (zB 120)
[3B] ry: Radius der Ellipse auf der Y-Achse (zB 80)
[3C] [7C] alpha: Rotation der X-Achse der Ellipse: [3C] 0 = keine Rotation; [7C] Rotation in Grad (zB 90)
[3D] larg-arc-flag: 0 = kleiner Teil der Ellipse, 1 = großer Teil der Ellipse
[3E] sweep-flag: 0 = Bogen wird entgegen dem Uhrzeugersinn gezeichnet, 1 = Bogen wird im Uhrzeugersinn gezeichnet
[3F] x4 y4: Absolute bzw. relative Koordinaten des Endpunkts des Ellipsenbogens
[4] Die strichlierten Bögen wären die Ergänzungsbögen zur vollständigen Ellipse
siehe auch -> Pfad - <path... />, Übersicht
Beispiele:
<svg width="400" height="380">
[1]<path d="M80 186 A120 100 0 1 1 260 186" stroke="magenta" stroke-width="4" fill="none"/>
<!-- Beispiel 1: [1] 4 Pixel breiter, magenta Ellipsenbogen wird vom Startpunkt [2] M zum [3F] Endpunkt gezeichnet; [3A] Radius der X-Achse = 120; [3B] Radius der XY-Achse = 100; [3C] 0 = keine Rotation; [3D] 1 = großer Teil der Ellipse; [3E] 1 = gezeichnet im Uhrzeigersainn, keine Füllung -->
[5] <path d="M100 350 A100 80 90 0 0 260 350" stroke="#00ddb6" stroke-width="6" fill="none"/>
<!-- Beispiel 2: [5] 6 Pixel breiter, blaugrüne Ellipsenbogen wird vom Startpunkt [6] M zum [7F] Endpunkt gezeichnet; [7A] Radius der X-Achse = 100; [7B] Radius der Y-Achse = 80; [7C] 90 = Rotation der X-Achse des Bogens um 90 Grad; [7D] 0 = kleiner Teil der Ellipse (hier die Hälfte); [7E] 0 = gezeichnet entgegen dem Uhrzeigersainn, [8] Füllung: gelb -->
</svg> |
