SVG Path – Bézier-Kurven

SVG Linien von Punkt zu Punkt, Bezierkurve

SVG Bezierkurven sind Pfade mit Kontrollpunkten, mit denen die Krümmung und Richtung der Kurve bis zum nächsten Punkt bestimmt wird. So entstehen die eleganten und zugleich exakten Freiformkurven der Computergrafik. Die kubische Bezierkurve wird z.B. auch in Illustrator und Photoshop eingesetzt und für die Beschreibung von Schriften.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Bézierkurven

Die Punkte eines Pfades können auch durch Kurven miteinander verbunden werden. Zu jedem Punkt des Pfades kann ein Kontrollpunkt angegeben werden, der die Krümmung der Kurve bis zum nächsten Punkt bestimmt.

In der Vektorgrafik mit grafischer Benutzeroberfläche – Illustrator, Photoshop, Inkscape – zeichnen wir Freistellpfade meist mit der kubischen Bézierkurve. In »Handarbeit« sind aufwändige Formen fast immer zu komplex – bei komplizierten Formen ist ein grafischer Editor unersetzlich.

Gute Einführung in die Berechnung von Bézierkurven für diejenigen, die Bézierkurven programmieren wollen: Bézier curves – a primer von Mike "Pomax" Kamermans

Bézierkurven

SVG quadratische und kubische Bezierkurven
Quadratische Bézierkurve
<path d="M70 250  Q20 110 ,250 60"           stroke="black" />

Kubische Bézierkurve
<path d="M120 160 C35 200 , 220 260 ,220 40" stroke="black" />

Kurvenpunkte mit Großbuchstaben werden als absolute Werte interpretiert, bei Kleinbuchstaben wird der Punkt relativ zum vorangegangenen Punkt gerendert.

      Startpunkt         Endpunkt
          |                 |
    +---------+      +-------------+
    |         |      |             |

 Mx  y   Cx   y,     x   y,     x   y 
  |  |   |    |      |   |      |   |
  +--+   +----+      +---+      +---+
    |       |            |        |
    |       |            |        +-- Endpunkt der Kurve
    |       |            +--Control
    |       +-- Control     des Endpunkts
    |           des Startpunkts
    |
    +-- Startpunkt der Kurve

Kurvensegmente aneinanderfügen

SVG Bezierkurve Wellenlinie
<path d="
	M 50 150 C70  250 , 130 250 ,150 150 
	M150 150 C170 50 ,  230 50 , 250 150 
	M250 150 C270 250 , 330 250 ,350 150
	M350 150 C370 50 ,  430 50 , 450 150
	M450 150 C470 250 , 530 250 ,550 150" 
	fill="hsla(0,0%,75%,0.5)" stroke="black" stroke-width="2" />

Jetzt wird Segment an Segment gehangen: Der Endpunkt eines Segments ist der Startpunkt M des nächsten Segments.

Der Pfad in diesem Beispiel ist gefüllt. Bezierkurven brauchen genauso wie Polylines fill="none", damit die Kurve nicht gefüllt wird.