StyleAssistant-Homepage

89. Von XML nach SVG mittels XSLT (21.05.2002)

SVG-Dokumente können aus anderen XML-Daten durch XSL-Transformationen erzeugt werden. Das folgende Beispiel kreise.xml definiert Kreise in einer XML-Struktur:

      
      <?xml version="1.0" encoding="ISO-8859-1"?>
      <?xml-stylesheet version="1.0" href="kreise.xsl" type="text/xsl"?>
      
      <kreise>
      
        <kreis>
          <mittelpunkt_x>100</mittelpunkt_x>
          <mittelpunkt_y>150</mittelpunkt_y>
          <radius>50</radius>
          <farbe>red</farbe>
        </kreis>
      
        <kreis>
          <mittelpunkt_x>300</mittelpunkt_x>
          <mittelpunkt_y>250</mittelpunkt_y>
          <radius>70</radius>
          <farbe>blue</farbe>
        </kreis>
      
      </kreise>

Die angegebene Formatvorlage kreise.xsl erzeugt circle-Elemente und deren Attribute cx, cy und r:

      <?xml version="1.0" encoding="ISO-8859-1"?>
      <xsl:stylesheet version="1.0"
        xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
      
      <xsl:output 
          method="xml" 
          doctype-public="-//W3C//DTD SVG 1.0//EN" 
          doctype-system=
            "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" 
          encoding="ISO-8859-1" 
          media-type="image/svg+xml" 
          version="1.0" 
          indent="yes"
      />

      <xsl:template match="/">
      
      <svg>
      
      <text x="20" y="20">Dieses SVG-Dokument wurde mittels XSLT
        aus einem XML-Dokument generiert.</text>
      
      <xsl:for-each select="kreise/kreis">
      <circle>
      
      <xsl:attribute name="cx">
        <xsl:value-of select="mittelpunkt_x" />
      </xsl:attribute>
      
      <xsl:attribute name="cy">
        <xsl:value-of select="mittelpunkt_y" />
      </xsl:attribute>
      
      <xsl:attribute name="r">
        <xsl:value-of select="radius" />
      </xsl:attribute>
      
      <xsl:attribute name="fill">
        <xsl:value-of select="farbe" />
      </xsl:attribute>
      
      </circle>
      </xsl:for-each>
      
      <text x="20" y="400">Test by TM 05/02</text>
      
      </svg>
      
      </xsl:template>
      </xsl:stylesheet>

Zur Ausführung der Transformation wird ein so genannter XSLT-Prozessor benötigt. Sehr einfach anzuwenden ist Saxon, speziell dessen DOS-Konsolenvariante Instant Saxon. Der Aufruf erfolgt durch:

            [bei in der XML-Datei angegebener XSL-Referenz]
            saxon -a -o ausgabe.svg kreise.xml
            bzw.
            saxon -o ausgabe.svg kreise.xml kreise.xsl

Es wird dieses Ergebnis erhalten (je ein roter und blauer Kreis sowie beschreibender Text):

      <?xml version="1.0" encoding="ISO-8859-1"?>
      
      <!DOCTYPE svg
        PUBLIC "-//W3C//DTD SVG 1.0//EN"
          "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
      <svg>
         <text x="20" y="20">Dieses SVG-Dokument wurde mittels XSLT
           aus einem XML-Dokument generiert.</text>
         <circle cx="100" cy="150" r="50" fill="red"/>
         <circle cx="300" cy="250" r="70" fill="blue"/>
         <text x="20" y="400">Test by TM 05/02</text>
      </svg>

Praktische Server-seitige SVG-Anwendungen lassen sich z. B. auf der Basis von PHP und dem XSLT-Prozessor Sablotron realisieren. Ein vom Autor realisiertes Projekt ist MSpec::SVG. Damit lassen sich so genannte Massenspektren ausgehend von tabellierten Datensätzen im SVG-Format generieren. Bei externen Zugriffen kann nur nach den Summenformeln C4H8 und C6H5CLO gesucht werden.

(89) So sieht's aus ... (ZIP-Datei)
Nach oben Zur Übersicht

Style

Assistant

Tipps & Tricks – Tipp 89 Zur Übersicht

Tipps & Tricks – Tipp 89
Zur Übersicht