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

SVG Tutorial

  svg tutorial index  |  Kapitel 10   

10.7 T und t - Kurzform fuer quadratische Bezierkurven

Die Kurzform für quadratische Bézier-Kurven wird mit der Anweisung T oder t eingeleitet.
Diese Anweisung erwartet nachfolgend nur einen (1) Koordinatenpunkt:

  • die Koordinaten des Endpunkts.

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

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

Die Verwendung der Anweisungen T oder t sind daher nur im Zusammenhang mit einer vorangegangen Q oder q 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>quadratic bezier curves - T und t</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">T|t</tspan>
  Endpunkt
  </text>

  <path d="M 50,150
           q 75,-75 150,0
           t 150,0" />

  <line x1="50" y1="150" x2="125" y2="75" />
  <line x1="200" y1="150" x2="125" y2="75" />
  <line x1="200" y1="150" x2="275" y2="225"
    style="stroke-dasharray:8,2;" />
  <line x1="350" y1="150" x2="275" y2="225"
    style="stroke-dasharray:8,2;" />
  <circle cx="50" cy="150" r="3" />
  <circle cx="200" cy="150" r="3" />
  <circle cx="125" cy="75" r="3" />
  <circle cx="275" cy="225" r="3"
    style="fill:white; stroke:black;" />
  <circle cx="350" cy="150" r="3" />
  <text x="50" y="170">M 50,150</text>
  <text x="145" y="65">
  <tspan style="font-weight:bold">q</tspan> 75,-75
  <tspan x="145" dy="20">Kontrollpunkt</tspan>
  </text>
  <text x="210" y="130">150,0
  <tspan x="210" dy="20">Endpunkt q</tspan>
  </text>
  <text x="290" y="230">generierter
  <tspan x="290" dy="20">Kontrollpunkt</tspan>
  </text>
  <text x="360" y="160">
  <tspan style="font-weight:bold;">t</tspan> 150,0
  <tspan x="360" dy="20">Endpunkt</tspan>
  </text>
  <text x="50" y="275">absolute Angabe:
  <tspan x="70" dy="20">M 50,150
  <tspan style="font-weight:bold;">Q</tspan> 125,75 200,150
  </tspan>
  <tspan x="143" dy="20">
  <tspan style="font-weight:bold;">T</tspan> 350,150
  </tspan>
  </text>
</svg>
      



index  |  Kapitel 10  |  10.6  <<  | 10.7 |  >>  10.8   A und a - Bogenkurven