<xsl:stylesheet  version="1.0" 
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
 xmlns="http://www.w3.org/2000/svg" 
 xmlns:svg="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink" 
 xmlns:ex="http://www.treebuilder.de/namespace"> 
 <xsl:template match="/"> 
 <xsl:apply-templates /> 
 </xsl:template> 
 <xsl:template match="*">
  <xsl:copy>
    <xsl:apply-templates select="@*|node()"/>
  </xsl:copy>
</xsl:template>
<xsl:template match="@*">
  <xsl:copy/>
</xsl:template>
<xsl:template match="processing-instruction()">
  <xsl:copy-of select="."/>	
</xsl:template>

<xsl:template match="ex:progressBar">
<xsl:variable name="id" select="generate-id()"/>
  <svg id="{$id}" xmlns="http://www.w3.org/2000/svg" width="{@width}" height="{@height}">
    <rect x="0" y="0" width="{@width}" height="{@height}" fill="grey" rx="10" ry="10"/>
    <rect x="10" y="10" width="{@width - 20}" height="{@height - 20}" fill="black"/>
    <rect x="10" y="10" width="{@width div 2}" height="{@height - 20}" fill="blue"/>
    <script>
    <xsl:value-of select="@name"/>= function (){}
    <xsl:value-of select="@name"/>.svg=document.getElementById("<xsl:value-of select="$id"/>")
    <xsl:value-of select="@name"/>.setValue= function (x){
    <xsl:value-of select="@name"/>.svg.getElementsByTagNameNS("http://www.w3.org/2000/svg","rect").item(2).setAttributeNS(null,"width",x)
    <xsl:value-of select="@name"/>.value=x
    }
    <xsl:value-of select="@name"/>.value=<xsl:value-of select="@width div 2"/>
    </script>
  </svg>
</xsl:template>


 </xsl:stylesheet>
