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