2.2.5  Diagramme darstellen

Nachdem eine SVG Standards SVG Grafik Anwendungsgebiete Visualisierung im XML Format vorliegt, kann diese auch direkt mittels XSLT erzeugt werden. Über das HTML5 <svg> Element kann so eine Grafik inline in das - ebenfalls durch das XSLT - generierte HTML Dokument eingebunden werden.

Betrachten wir unser Beispiel von oben, erweitert um drei neue <block> Elemente:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="chart.xsl" ?>
<document>
  <title>Das ultimative Zwei-Kapitel Dokument</title>
  <chapter>
    <title>Kapitel 1</title>
    <intro>In Kapitel 1 wird kurz gesagt was Sache ist.</intro>
    <content>Um es kurz zu machen, wie der Hase läuft steht in Kapitel 2.</content>
  </chapter>
  <chapter>
    <title>Kapitel 2</title>
    <intro>Hier wird erklärt, wie der Hase läuft.</intro>
    <content>Im Prinzip ist es ganz einfach. Betrachten wir doch drei gelbe Blöcke:
    </content>
    <block/>
    <block/>
    <block/>
  </chapter>
</document>
Plain Text

Wenn wir das XSLT Stylesheet noch um eine Regel für das neue <block> Element ergänzen, so wie hier:

<xsl:template match="block">
   <svg style="background-color:yellow" width="30" height="30" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     xmlns="http://www.w3.org/2000/svg"/>
  <br/>
  <br/>
</xsl:template>
Plain Text

Dann erhalten wir drei schön formatierte gelbe SVG Blöcke ...

Weiterführende Links: