Question

我找到了解决上一个问题的方法。我需要将graphml格式修改为svg。我从the article运行测试示例，但是它有问题，svg没有正确渲染，但输出就好像是正确的。

我的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>

使用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>

使用的结果看起来如果所有rects都移动到0,0坐标：

结果svg代码

<?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>

Answer 1

问题是，没有x和y坐标设置为<rect>元素。因此，如果输入中有任何坐标，那么类似的东西会这样做：

<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>

这个将graphml转换为svg的XSLT有什么问题？

1 个答案: