 |
|
Ausgewählt:
|
INFO Nr. 1117
zum Thema |
MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG |
|
Stichwörter: |
HTML, Erweiterungen, SVG (Scalable Vector Graphics), Pfad - <path... />, Bézier-Kurven, Kubische Bézierkurve (Cubic Bézier curve): C (CurveTo) |
|
Inhalt: |
Pfad - <path... />, Kubische Bézierkurve: C (CurveTo)
Mit dem Tag Pfad (path) <path... /> können in SVG u.a. verschiedene Bézierkurven gezeichnet werden. Eine dieser Bézierkurven ist die [1] Kubische Bézierkurve: <path d="Mx1 y1 Qx2 y2 x3 y3" />
Anzugeben ist:
[1A] M oder m: Startpunkt des Pfades bzw. der Kubischen Bézierkurve (zB "M10 10 )
[1B] [1C] [1D] C (absolute Koordinaten) oder c (relative Koordinaten) mit Angabe von drei Punkten: [1B] 1. Punkt und [1C] 2. Punkt = zwei Kontrollpunkte für die Kubische Bézierkurve und Punkt der [1E] Tangente vom Startpunkt und der [1F] Tangente vom Endpunkt der Kubischen Bézierkurve; [1D] 3. Punkt = Endpunkt der Kubischen Bézierkurve;
[3] Farbe des Pfades (zB stroke="magenta")
[4] Breite des Pfades (zB stroke-width="4")
[5] Farbe oder Füllung (zB fill="yellow" oder keine Füllung (zB fill="none)
siehe auch -> Pfad - <path... />, Übersicht
Beispiele:
<svg width="330" height="350">
<path d="M10 10 C 120 200 210 10 310 50" stroke="magenta" stroke-width="4" fill="none"/>
[1]<!-- Beispiel 1: 4 Pixel breite, magenta Kubische Bézierkurve wird vom Startpunkt [1A] M zum [1D] Endpunkt gezeichnet; Koordinaten nach C definieren zwei [1B] [1C] Kontrollpunkte und den [1D] Endpunkt für die Kurve, keine Füllung-->
[2] <path d="M10 300 c 50 -110 160 110 300 30" stroke="#00ddb6" stroke-width="6" fill="yellow"/>
<!-- Beispiel 2: 6 Pixel breite, blaugrüne Kubische Bézierkurve wird vom Startpunkt [2A] M zum [2D] Endpunkt gezeichnet; Koordinaten nach c definieren relative Koordinaten der zwei [2B] [2C] Kontrollpunkte für und den [2D] Endpunkt für die Kurve, [5] Füllung: gelb-->
</svg>
|
|
