|
Mit den Anweisungen A oder a
können Sie eine elliptische Bogenkurve erzeugen.
Bei einer elliptischen Bogenkurve wird zuerst eine Ellipse festgelegt, um welche dann
der Pfad bzw. die Kurve verläuft. Die Bogenkurve stellt quasi Teile der Umrandung der
Ellipse dar.
Der Anweisung A oder a
müssen 5 Werte und ein Koordinatenpunkt folgen:
- der Radius der x-Achse der Ellipse
- der Radius der y-Achse der Ellipse
- die Rotation der x-Achse der Ellipse in Grad
(0 bedeutet keine Rotation)
- das large-arc-flag:
0 für den kurzen Weg um die Ellipse
1 für den langen Weg um die Ellipse
- das sweep-flag:
0 für Zeichnung entgegen den Uhrzeigersinn
1 für Zeichnung mit dem Uhrzeigersinn
- die Koordinaten des Endpunktes.
Die Reihenfolge ist unbedingt einzuhalten.
Der Mittelpunkt der Ellipse wird aus allen Werten von A durch den user agent generiert.
Anfangspunkt der elliptischen Bogenkurve ist immer der direkt zuvor festgelegte Punkt des Pfades.
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>elliptical arc curve - A und a</desc>
<defs>
<style type="text/css">
<![CDATA[
text {font-family:Verdana; font-size:14px;}
path {fill:none; stroke:red; stroke-width:2px;}
line {fill:none; stroke:black;}
]]>
</style>
</defs>
<g transform="scale(1.7)">
<path d="M 150,100
A 70 50 0 1 0 250,150" />
<path d="M 150,100
A 70 50 0 1 1 250,150"
style="stroke:gray; stroke-width:1px;" />
<path d="M 150,100
A 70 50 0 0 0 250,150"
style="stroke:blue; stroke-width:1px;" />
<path d="M 150,100
A 70 50 0 0 1 250,150"
style="stroke:green; stroke-width:1px;" />
<!-- Die Winkellinien -->
<path d="M 111.5,145.8 h 70 v 50"
style="stroke:gray; stroke-width:.5px;" />
</g>
<text x="20" y="30">Startpunkt: M 150,100</text>
<text x="20" y="55">
<tspan style="font-weight:bold">elliptische Bogenkurve A</tspan>
<tspan x="20" dy="20">Radius x: 70 Pixel</tspan>
<tspan x="20" dy="16">Radius y: 50 Pixel</tspan>
<tspan x="20" dy="16">Rotation x: 0 Grad</tspan>
<tspan x="20" dy="16" style="fill:red;">langer Weg: 1, gegen Uhr: 0</tspan>
<tspan x="20" dy="16" style="fill:gray;">langer Weg: 1, mit Uhr: 1</tspan>
<tspan x="20" dy="16" style="fill:blue;">kurzer Weg: 0, gegen Uhr: 0</tspan>
<tspan x="20" dy="16" style="fill:green;">kurzer Weg: 0, mit Uhr: 1</tspan>
<tspan x="20" dy="16">Endpunkt: 250,150</tspan>
</text>
<text x="260" y="185">Start</text>
<text x="430" y="270">Ende</text>
<text x="240" y="244">x</text>
<text x="312" y="293">y</text>
</svg>
|
