Information Technology Reference
In-Depth Information
Die MathML-Spezifikation:
http://www.w3.org/TR/MathML/
»
Die
MathML Working Group
:
http://www.w3.org/Math/
»
Planet MathML
:
http://www.w3.org/Math/planet/
»
Demos
:
http://www.mozilla.org/projects/mathml/demo/
»
Rechts neben der jeweiligen MathML-Formel findet sich zum besseren Ver-
ständnis die dazugehörige SVG-Grafik. Bleiben wir wieder beim Beispiel Kreis,
und sehen wir uns den SVG-Code für die Kreis-Grafik in Abbildung 6.1 an.
<svg width="100" height="100">
<circle cx="50" cy="50" r="45"
fill="none" stroke="black" />
<path d="M 50 50 h 45"
stroke="black" stroke-dasharray="5,5"/>
</svg>
Listing 6.2:
Der SVG-Quellcode für die Kreis-Grafik
Am Beginn des SVG-Blocks steht jetzt
<svg>
, an seinem Ende
</svg>
. Im Un-
terschied zu MathML werden im Start-Tag noch zusätzlich die Breite
width
und
die Höhe
height
der Grafik festgelegt und damit entsprechend viel Platz auf
der HTML-Seite reserviert. Der Kreis selbst ist ein
circle
-Element mit dem
Mittelpunkt
cx
/
cy
und dem Radius
r
. Das Aussehen des Kreises bestimmen die
Attribute
fill
und
stroke
- Füllung und Linie.
Die gestrichelte Linie zur Anzeige des Radius entsteht durch ein
path
-Element,
dessen Geometriedaten in seinem
d
-Attribut bestimmt sind. Ähnlich wie beim
canvas
-Element sind in SVG nicht nur Linien, sondern auch komplexe Kurven in
offener und geschlossener Form als Flächen möglich. Die Syntax für Geome-
trieanweisungen im
d
-Attribut verwendet neben Zahlen für Koordinaten auch
Buchstaben zur Identifikation des Pfadtyps, der direkt auf das jeweilige Kürzel
folgt:
d="M 50 50 h 45"
bedeutet damit so viel wie:
»Gehe zum Punkt 50/50, und
zeichne von dort eine horizontale Linie mit der Länge 45 nach rechts.«
Dass auch andere Notationen möglich sind, sehen wir beim Quadrat und beim
Rechteck. Die Diagonale des Quadrats entsteht mit
d="M 10 90 L 90 10"
. Das
wäre die Anweisung
»Gehe zum Punkt 10/90, und zeichne von dort eine Linie zum
Punkt 90/10«,
und bei der Diagonale des Rechtecks kommt
d="M 5 80 l 90 -75"
zum Einsatz, was so viel heißt wie:
»Gehe zum Punkt 5/80, und zeichne von dort
eine Linie zu jenem Punkt, der um 90 Pixel weiter rechts und 75 Pixel weiter oben
liegt.«
