|
Inhalt: |
Pfad - <path... />, Kubische Bézierkurve: S (Shorthand / Smooth CurveTo)
Mit dem Tag Pfad (path) <path... /> können in SVG u.a. verschiedene Bézierkurven gezeichnet werden. Eine [1] Kubische Bézierkurve: kann mit dem Pfad-Kommando [6] S (Shorthand / Smooth CurveTo) weitergeführt werden. Dabei wird als erster Kontrollpunkt der letzte gespiegelte Kontrollpunkt der vorher definierten Bezierkurce verwendet <path d="Mx1 y1 Cx2 y2 x3 y3 x4 y4 Sx5 y5 x6 y6" />
Ergänzend zur Kubischen Bézierkurve sind für die weiterführende kubische Bézierkurve mindestens zwei Punkte anzugeben:
[6A] [6B] S (absolute Koordinaten) oder s (relative Koordinaten) mit Angabe von zwei Punkten: [6A] 1. Punkt nach S (oder s) = weiterer Kontrollpunkt für die weiterführende kubische Bézierkurve, der gleichzeitig ein Punkt der [6C] Tangente zum [6B] Endpunkt der weiterführenden kubischen Bézierkurve ist; erster Kontrollpunkt ist der letzte [6D] gespiegelte Kontrollpunkt der [1] vorherigen Kurve; weitere Kontrollpunkte und Punkte der weiterführenden kubischen Bézierkurve können hinzugefügt werden;
siehe auch -> Pfad - <path... />, Übersicht
Beispiele:
<svg width="470" height="420">
[6] <path d="M10 10 C120 200 210 10 310 50 S329 10 450 50" stroke="magenta" stroke-width="4" fill="none"/>
<!-- Beispiel 1: [1] 4 Pixel breite, magenta Kubische Bézierkurve wird vom Startpunkt M zum Endpunkt gezeichnet; absolute Koordinaten nach S definieren einen weiteren [6A] Kontrollpunkt und den [6B] Endpunkt für die [6] weiterführende Kurve, keine Füllung-->
[7] <path d="M10 300 c50 -110 160 110 300 30 s303 30 150 60" stroke="#00ddb6" stroke-width="6" fill="yellow"/>
<!-- Beispiel 2: [2] 6 Pixel breite, blaugrüne Kubische Bézierkurve wird vom Startpunkt M zum Endpunkt gezeichnet; relative Koordinaten nach s definieren einen weiteren Kontrollpunkt [7A] und den neuen [7B] Endpunkt für die [7] weiterführende Kurve, Füllung: gelb-->
</svg> |
