SVG Tutorial

10.4 C und c - kubische Bezierkurven

Die Bézier-Kurve ist grundsätzlich eines der wichtigsten grafischen Elemente, weil fast alle Formen und Zeichenumrisse aus ihren Segmenten zusammengesetzt werden können. Die Bézier-Kurve ist nach Pierre Bézier benannt, der als Pionier des CAD-Bereiches zwischen 1960 und 1970 für den Französischen Autohersteller Renault eine Modellierungshilfe für Autokarosserien entwickelte. (gegen Rost hat das aber auch nicht geholfen, A.d.Lektors)

Bézier-Kurven sind Kurvenverläufe, die durch zwei Endpunkte einer Kurve und die Besonderheiten der an ihnen angelegten Tangenten definiert sind. Die Gestalt einer Bézier-Kurve wird durch die Position ihrer Kontrollpunkte und der daraus resultierenden Neigung der so festgelegten Tangenten beeinflusst.

SVG unterscheidet zwischen einer kubischen Bézier-Kurve, die durch zwei Kontrollpunkte definiert wird und einer quadratischen Bézier-Kurve, die durch lediglich einen Kontrollpunkt definiert wird, durch welchen allerdings ebenfalls 2 Tangenten festgelegt werden.

Kubische Bézier-Kurven werden mit der Anweisung C oder c definiert. Außerdem gibt es in SVG eine Kurzform für die Erstellung von kubischen Bézier-Kurven: S oder s. Diese wird im nächsten Kapitel erläutert.

Wenn Sie eine Bézier-Kurve mit C oder c erstellen ist folgendes zu beachten:
der Anfangspunkt der Bézier-Kurve ist immer der direkt zuvor festgelegte Punkt (Startpunkt M, Endpunkt einer vorherigen lineto-Anweisung, Endpunkt einer vorherigen Kurven-Anweisung, ...).

Die Anweisung C oder c erwartet 3 nachfolgende Koordinatenpunkte:

die Koordinaten des ersten Kontrollpunktes
(die imaginäre Linie, die zwischen dem Anfangspunkt der Bézier-Kurve und dem ersten Kontrollpunkt verläuft, bildet die erste Tangente, welche den Verlauf der Kurve beeinflußt),
die Koordinaten des zweiten Kontrollpunktes
(die imaginäre Linie, die zwischen dem Endpunkt der Bézier-Kurve und dem zweiten Kontrollpunkt verläuft, bildet die zweite Tangente, welche den Verlauf der Kurve beeinflußt),
die Koordinaten des Endpunkts.

Die oben angegebene Reihenfolge der Koordinatenpunkte muß eingehalten werden.

Beispiel Quellcode

Grafische Darstellung: SVG-Darstellung (nur SVG-fähige Browser!) Screenshot JPG-Grafik

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="460" height="280"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>das path-Element</title>
  <desc>cubic bezier curves - C und c</desc>
  <defs>
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana; font-size:14px; fill:black;}
      path {fill:none; stroke:red; stroke-width:2px;}
      line {fill:none; stroke:black;}
      circle {fill:black;}
    ]]>
    </style>
  </defs>

  <text x="20" y="30" style="font-size:16px;">
  <tspan style="font-weight:bold">C|c</tspan>
    &apos;Kontrollpunkt 1&apos;
    &apos;Kontrollpunkt 2&apos;
    &apos;Endpunkt&apos;
  </text>

  <path d="M 50,150
           c 0,-50 150,-50 150,0" />

  <circle cx="50" cy="150" r="3" />
  <circle cx="50" cy="100" r="3" />
  <circle cx="200" cy="100" r="3" />
  <circle cx="200" cy="150" r="3" />
  <line x1="50" y1="150" x2="50" y2="100" />
  <line x1="200" y1="150" x2="200" y2="100" />

  <text x="50" y="170">M 50,150</text>
  <text x="50" y="70">Kontrollpunkt 1</text>
  <text x="50" y="90"><tspan style="font-weight:bold;">
    c
  </tspan> 0,-50</text>
  <text x="200" y="70">Kontrollpunkt 2</text>
  <text x="200" y="90">150,-50 </text>
  <text x="200" y="170">150,0</text>
  <text x="200" y="190">Endpunkt</text>
  <text x="50" y="230">absolute Angabe:
  <tspan x="70" dy="20">M 50,150
  <tspan style="font-weight:bold;">
    C
  </tspan> 50,100 200,100 200,150
  </tspan>
  </text>
</svg>

Im obigen Beispiel sind die Kontrollpunkte und die dadurch entstandenen Tangenten der Kurve zum besseren Verständnis ebenfalls dargestellt.
Die Kurve wird mit der Anweisung c (Kleinbuchstabe) erstellt, d.h. die 3 folgenden Koordinatenpunkte sind relativer Natur und beziehen sich alle auf den direkt zuvor festgelegten Punkt des Pfades: in diesem Falle auf den, mit M festgelegten Startpunkt des Pfades.

Die Lage der Kontrollpunkte bestimmt die Länge und den Verlauf der Tangenten.
Die Länge und der Verlauf der Tangenten bestimmen wiederum den Verlauf der Kurve.

Im folgenden SVG Dokument sind eine Anzahl von kubischen Bézier-Kurven definiert.
Sie zeigen mögliche Verläufe einer mit c oder C definierten Kurve durch unterschiedlichste Tangenten bzw. Kontrollpunkte.

Beispiel Quellcode

Grafische Darstellung: SVG-Darstellung (nur SVG-fähige Browser!) Screenshot JPG-Grafik

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="510" height="580"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>das path-Element</title>
  <desc>cubic bezier curves - einige Beispiele mit c</desc>
  <defs>
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana; font-size:14px; fill:black;}
      path {fill:none; stroke:red; stroke-width:2px;}
      line {fill:none; stroke:black;}
      circle {fill:black;}
    ]]>
    </style>
  </defs>

  <!-- Kurve 1 -->
  <text x="90" y="30">Kurve 1</text>
  <path d="M 160,10
           c 50,20 150,60 200,80" />

  <circle cx="160" cy="10" r="3" />
  <circle cx="210" cy="30" r="3" />
  <circle cx="310" cy="70" r="3" />
  <circle cx="360" cy="90" r="3" />
  <line x1="160" y1="10" x2="210" y2="30" />
  <line x1="360" y1="90" x2="310" y2="70" />

  <!-- Kurve 2 -->
  <text x="90" y="150">Kurve 2</text>
  <path d="M 160,130
           c 50,-60 210,20 200,80" />

  <circle cx="160" cy="130" r="3" />
  <circle cx="210" cy="70" r="3" />
  <circle cx="370" cy="150" r="3" />
  <circle cx="360" cy="210" r="3" />
  <line x1="160" y1="130" x2="210" y2="70" />
  <line x1="360" y1="210" x2="370" y2="150" />

  <!-- Kurve 3 -->
  <text x="90" y="270">Kurve 3</text>
  <path d="M 160,250
           c 130,-50 120,-30 200,80" />

  <circle cx="160" cy="250" r="3" />
  <circle cx="290" cy="200" r="3" />
  <circle cx="280" cy="220" r="3" />
  <circle cx="360" cy="330" r="3" />
  <line x1="160" y1="250" x2="290" y2="200" />
  <line x1="360" y1="330" x2="280" y2="220" />

  <!-- Kurve 4 -->
  <text x="90" y="390">Kurve 4</text>
  <path d="M 160,370
           c 190,-30 -10,-170 200,80" />

  <circle cx="160" cy="370" r="3" />
  <circle cx="350" cy="340" r="3" />
  <circle cx="150" cy="200" r="3" />
  <circle cx="360" cy="450" r="3" />
  <line x1="160" y1="370" x2="350" y2="340" />
  <line x1="360" y1="450" x2="150" y2="200" />

  <!-- Kurve 5 -->
  <text x="90" y="510">Kurve 5</text>
  <path d="M 160,490
           c 330,-50 -140,-190 200,80" />

  <circle cx="160" cy="490" r="3" />
  <circle cx="490" cy="440" r="3" />
  <circle cx="20" cy="300" r="3" />
  <circle cx="360" cy="570" r="3" />
  <line x1="160" y1="490" x2="490" y2="440" />
  <line x1="360" y1="570" x2="20" y2="300" />
</svg>

index | Kapitel 10 | 10.3 << | 10.4 | >> 10.5 S und s - Kurzform fuer kubische Bezierkurven