Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 10   

10.5 S und s - Kurzform fuer kubische Bezierkurven

Die Kurzform für kubische Bézier-Kurven wird mit der Anweisung S oder s eingeleitet.
Diese Anweisung erwartet nachfolgend nur 2 Koordinatenpunkte:

  • 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.

Der erste Kontrollpunkt wird automatisch aus dem letzten Kontrollpunkt der direkt zuvor festgelegten Bézier-Kurve generiert.

Die so entstandene Tangente entspricht in der Länge der Tangente des zuvor festgelegen Kontrollpunkts, verläuft aber in genau entgegengesetzte Richtung.
Sie ist also das "Spiegelbild" der vorherigen Tangente.

Die Verwendung der Anweisungen S oder s sind daher nur im Zusammenhang mit einer vorangegangen C oder c Anweisung sinnvoll.

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="500" height="350"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>das path-Element</title>
  <desc>cubic bezier curves - S und s</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">S|s</tspan>
  &apos;Kontrollpunkt&apos; &apos;Endpunkt&apos;
  </text>

  <path d="M 50,150
           c 0,-50 150,-50 150,0
           s 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" />
  <circle cx="200" cy="200" r="3"
    style="fill:none;stroke:black;" />
  <circle cx="350" cy="200" r="3" />
  <circle cx="350" cy="150" r="3" />
  <line x1="50" y1="150" x2="50" y2="100" />
  <line x1="200" y1="150" x2="200" y2="100" />
  <line x1="200" y1="150" x2="200" y2="200"
    style="stroke-dasharray:8,2,8,2,8,2,8,2,8,2;" />
  <line x1="350" y1="200" x2="350" y2="150" />
  <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="210" y="145">Endpunkt <tspan
    style="font-weight:bold;">c</tspan></text>
  <text x="210" y="165">150,-50 </text>
  <text x="200" y="220"><tspan
    style="font-weight:bold;">s</tspan></text>
  <text x="200" y="240">generierter
  <tspan x="200"dy="20">
    Kontrollpunkt
  </tspan>
  </text>
  <text x="360" y="205">150,50</text>
  <text x="360" y="225">Kontrollpunkt</text>
  <text x="360" y="155">150,0</text>
  <text x="360" y="175">Endpunkt</text>
  <text x="50" y="290">absolute Angabe:
  <tspan x="70" dy="20">M 50,150
  <tspan style="font-weight:bold;">
    C
  </tspan> 50,100 200,100 200,150
  </tspan>
  <tspan x="142" dy="20">
  <tspan style="font-weight:bold;">S</tspan> 350,200 350,150
  </tspan>
  </text>
</svg>
      



index  |  Kapitel 10  |  10.4  <<  | 10.5 |  >>  10.6   Q und q - quadratische Bezierkurven