SVG-Grafik erzeugen

[ThomasM]

Hallo TMK,

Kann mir jemand sagen, wie ich es umschreiben muss, dass für jeden Balken eine eigen X-Position generiert wird, also z.B. durch Addieren eines Offsets?

Diesen Offset ermöglicht die Verwendung der Funktion position(), hier in kompakter Schreibweise umgesetzt (die Transformation ist nicht für jeden Balken separat nötig, ich habe diese auf eine umschließende Gruppe angewendet):

<xsl:template match="/">  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" height="600" width="800">  
    <g transform="translate(100,500) scale(1,-1)">  
      <xsl:for-each select="data/datum">  
        <xsl:variable name="delta" select="(position() - 1) * 30"/>  
        <polyline points="{0+$delta},0 {0+$delta},{.} {10+$delta},{.} {10+$delta},0" fill="{@col}"/>  
      </xsl:for-each>  
    </g>  
  </svg>  
</xsl:template>

Ergebnis mit Deinen XML-Daten:

<?xml version="1.0" encoding="UTF-8"?>  
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" height="600" width="800">  
  <g transform="translate(100,500) scale(1,-1)">  
    <polyline points="0,0 0,400 10,400 10,0" fill="green" />  
    <polyline points="30,0 30,300 40,300 40,0" fill="yellow" />  
    <polyline points="60,0 60,50 70,50 70,0" fill="green" />  
    <polyline points="90,0 90,100 100,100 100,0" fill="blue" />  
  </g>  
</svg>

BTW: Die Kommasetzung im points-Attribut ist nicht Pflicht, aber in der gewählten Form ist die Punktzuordnung am besten lesbar, wenn man die drei möglichen Varianten vergleicht:

points="0,0 0,400 10,400 10,0"
points="0,0,0,400,10,400,10,0"
points="0 0 0 400 10 400 10 0"

Grüße,
Thomas