|
Inhalt: |
Pfad - <path... />, Quadratische Bézierkurve: S (Shorthand / Smooth Quadratic Bézier CurveTo)
Mit dem Tag Pfad (path) <path... /> können in SVG u.a. verschiedene Bézierkurven gezeichnet werden. Eine [8] Quadratische Bézierkurve: kann mit dem Pfad-Kommando [9] T (Shorthand / Smooth Quadratic Bézier CurveTo) weitergeführt werden. Dabei wird als Kontrollpunkt der letzte gespiegelte [9A] Kontrollpunkt der vorher definierten Bezierkurce verwendet <path d="Mx1 y1 Qx2 y2 x3 y3 Tx4 y4" />
Ergänzend zur Quadratischen Bézierkurve sind für die weiterführende quadratische Bézierkurve mindestens ein Punkt anzugeben:
[9B] S (absolute Koordinaten) oder s (relative Koordinaten) mit Angabe von einem Punkte nach S (oder s) = [9B] Endpunkt der weiterführenden Quadratischen Bézierkurve; neuer [9A] Kontrollpunkt ist der gespiegelte vorherige Kontrollpunkt, der auch ein Punkt der [9C] Tangente zum Endpunkt der weiterführenden Quadratischen Bézierkurve ist; weitere Punkte für die Quadratische Bezierkurve können hinzgefügt werden
; siehe auch -> Pfad - <path... />, Übersicht
Beispiele:
<svg width="430" height="480">
[9]<path d="M10 100 Q80 180 200 100 T400 100" stroke="magenta" stroke-width="4" fill="none"/>
<!-- Beispiel 1: [8] 4 Pixel breite, magenta Quadratische Bézierkurve wird vom Startpunkt M zum Endpunkt gezeichnet; absolute Koordinaten nach T definieren einen neuen [9B] Endpunkt für die [9] weiterführende Kurve, [9A] Kontrollpunkt ist der gespiegelte Kontrollpunkt der vorherigen Kurve, keine Füllung-->
[11] <path d="M10 300 q100 -60 160 200 40 t200 -40" stroke="#00ddb6" stroke-width="6" fill="yellow"/>
<!-- Beispiel 2: [10] 6 Pixel breite, blaugrüne Quadratische Bézierkurve wird vom StartpunktM zum Endpunkt gezeichnet; relative Koordinaten nach t definieren einen neuen [11B] Endpunkt für die für die [11] weiterführende Kurve, [11A] Kontrollpunkt ist der gespiegelte Kontrollpunkt der vorherigen Kurve, Füllung: gelb-->
</svg> |
