XML in SVG umwandeln

(Auszug aus "XSLT Kochbuch" von Sal Mangano)

"Bilder können Sie überall finden. Es kommt darauf an, Dinge wahrzunehmen und zu ordnen."
Elliott Erwitt

Einleitung

SVG (Scalable Vector Graphics) ist ein Vektorgrafikformat in Form einer XML-Kodierung, das möglicherweise die Art und Weise revolutionieren wird, wie grafische Inhalte im Internet übermittelt werden. Einer der zwingendsten Gründe für die Kodierung von Grafik als XML ist der, dass sie eine grafische Darstellung von Daten mit Hilfe einer Transformation ermöglicht. Infolgedessen kann XSLT, das keinerlei eingebaute Grafikfähigkeiten hat, komplexe grafische Ergebnisse produzieren, weil es einer im Browser eingebetteten SVG-Engine ermöglicht, den Großteil der dazu nötigen Arbeit zu übernehmen.

Dieses Kapitel setzt zwar voraus, dass Sie bereits ein wenig mit SVG vertraut sind, stellt aber in seiner Einleitung auch ein paar einführende Techniken vor, die Sie häufig verwenden werden.

Eines der ersten Dinge, die Sie über ein Grafiksystem wissen müssen, ist die Ausrichtung seines Koordinatensystems. Nach jahrelangem Studium von Algebra, Trigonometrie und Analysis empfinden die meisten technisch versierten Leser das kartesische Koordinatensystem als das natürlichste System. In diesem System nehmen die Werte von X-Koordinaten von links nach rechts und die der Y-Koordinaten von unten nach oben im Diagramm zu. Aber leider verwendet SVG kein kartesisches System, sondern es dreht die Y-Achse derart um, dass der Ursprung mit den Koordinaten 0,0 sich in der oberen linken Ecke befindet und die Y-Koordinaten nach unten hin zunehmen. Für viele Arten von Anwendungen ist das Koordinatensystem irrelevant. In jenen Situationen aber, in denen es um die grafische Anzeige von Daten geht, ist das kartesische System besser, weil es zu einer Orientierung der Anzeige führt, die von den meisten Menschen als intuitiv richtig empfunden wird. SVG verfügt über eine mächtige Eigenschaft, mit der Sie das Koordinatensystem entsprechend der Bedürfnisse Ihrer Anwendung transformieren können. Das geschieht mit Hilfe von Verschiebung, Drehung und Skalierung des Koordinatensystems, die auf einzelne Linien und andere Formen oder auf ganze Gruppen grafischer Elemente angewendet werden können. Insbesondere können Sie mit einem kartesischen Koordinatensystem arbeiten, indem Sie einfach die folgende Transformation angeben:

<svg:g transform="translate(0,{$height}) scale(1,-1)">
  <!-- Alle Inhalte in kartesischen Koordinaten -->
</svg:g>

Dabei ist $height die Höhe der gesamten SVG-Grafik bzw. die maximale Y-Koordinate in der Gruppe.

Beim Plotten von Daten in einem Diagramm können Sie das Koordinatensystem auf den Wertebereich der Daten verschieben und skalieren, d.h., sie können die Datenwerte als Koordinatenwerte verwenden:

<svg:g transform="scale(1,{$height div $max})">
  <!-- Alle Inhalte in kartesischen Koordinaten -->
</svg:g>

In diesem Beispiel skalieren Sie die Y-Koordinate in Abhängigkeit von $height (der Höhe der SVG-Grafik) und $max (dem maximalen Datenwert, der geplottet wird).

Die Konvertierung in kartesische Koordinaten plus Skalierung ist eine bequeme Methode beim Plotten von Daten, die aber leider ihre Nachteile hat, sobald Sie im transformierten Koordinatensystem einen Text platzieren möchten. Wegen der kartesischen Abbildung erscheint der Text auf dem Kopf und wird zusätzlich durch die Skalierung verzerrt. Daher müssen Sie eine Transformation auf den Text anwenden, die diesen Effekt wieder ausgleicht:

<svg:text x="{$someXPos}" y="{$someYPos}" transform="translate({$someXPos},{$someYPos}) scale(1,{-$max div $height}) translate({-$someXPos},{-$someYPos})">Some Text</svg:text>

Bei solchen Transformationen wird mir schwindlig, aber manchmal ist das die einfachste Art, um ein gewünschtes Ergebnis zu erzielen.

  

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema XSLT bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © 2006 O'Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "XSLT Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O'Reilly Verlag GmbH & Co. KG, Balthasarstraße 81, 50670 Köln, kommentar(at)oreilly.de