Search code examples
xmlxsltsvgconvertersgraphml

What is wrong with this XSLT that converts graphml to svg?

I found solving for my previous question. I was needed to modificated graphml format to svg. I run test examples from the article, but something wrong with it, svg not properly rendering, but output as if it is proper.

My test.xml:

<graph edgedefault="directed">
  <node id="n1"/>
  <node id="n2"/>
  <node id="n3"/>
  <node id="n4"/>
  <node id="n5"/>
  <edge source="n1" target="n2"/>
  <edge source="n1" target="n5"/>
  <edge source="n1" target="n3"/>
  <edge source="n2" target="n4"/>
</graph>

And used xslt:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/2000/svg">
 <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
 <xsl:template match="graph">
   <!-- when finding a 'graph' element, create the 'svg' root and its 'defs' section -->
   <svg>
     <defs>
       <marker id="arrow" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="10" markerHeight="10" orient="auto">
         <path fill="black" d="M0 0 10 5 0 10z"/>
       </marker>
     </defs>
     <!-- for each 'node' create a 'g' element with its contents -->
     <xsl:for-each select="node">
       <g>
         <rect width="100" height="100" fill="silver"/>
         <text style="font-size:24;font-weight:bold">
           <xsl:value-of select="@id"/>
         </text>
       </g>
     </xsl:for-each>
     <!-- for each 'edge' create a 'line' with the arrow if it is a 'directed' edge -->
     <xsl:for-each select="edge">
       <line>
         <xsl:if test="not(@directed='false')">
           <xsl:attribute name="style">marker-end:url(#arrow)</xsl:attribute>
         </xsl:if>
       </line>
     </xsl:for-each>
   </svg>
 </xsl:template>
</xsl:stylesheet>

The result of using looks like if all rects moved to 0,0 coordinates:

result

The result svg code

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="arrow" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="10" markerHeight="10" orient="auto">
      <path fill="black" d="M0 0 10 5 0 10z"/>
    </marker>
  </defs>
  <g>
    <rect width="100" height="100" fill="silver"/>
    <text style="font-size:24;font-weight:bold">n1</text>
  </g>
  <g>
    <rect width="100" height="100" fill="silver"/>
    <text style="font-size:24;font-weight:bold">n2</text>
  </g>
  <g>
    <rect width="100" height="100" fill="silver"/>
    <text style="font-size:24;font-weight:bold">n3</text>
  </g>
  <g>
    <rect width="100" height="100" fill="silver"/>
    <text style="font-size:24;font-weight:bold">n4</text>
  </g>
  <g>
    <rect width="100" height="100" fill="silver"/>
    <text style="font-size:24;font-weight:bold">n5</text>
  </g>
  <line style="marker-end:url(#arrow)"/>
  <line style="marker-end:url(#arrow)"/>
  <line style="marker-end:url(#arrow)"/>
  <line style="marker-end:url(#arrow)"/>
</svg>
Solution

  • The problem is, that no x and y coordinates are set to the <rect> element. Therefore something like that would do it, if there are any coordinates are available in the input:

    <xsl:for-each select="node">
   <xsl:variable select="xpath to get x" name="x" />
   <xsl:variable select="xpath to get y" name="y" />
   <g>
     <rect width="100" height="100" fill="silver" x="{$x}" y="{$y}" />
     <text style="font-size:24;font-weight:bold">
       <xsl:value-of select="@id"/>
     </text>
   </g>
 </xsl:for-each>