如何将 XML 数据转换为 SVG 以实现文档布局可视化？

Question

在我的 XML 文件中，我有表示打印文档的物理布局的注释，我想使用以 SVG 格式绘制的简单网格将其可视化。

所讨论的文档是使用一组元素描述的，如下所示。首先，area-model 元素定义了文档的宽度和高度，以及文档如何垂直（1 行）和水平（3 列）划分。

使用 hspacing 和 vspacing 属性定义列和行，其值是宽度和高度属性的百分比。

area-model 元素中定义的初始布局然后使用嵌套的sub-area 元素进行详细说明，这些元素具有与布局的物理特性相关的相似属性。在这种情况下，第一列总共有九行。 location 属性描述了子区域在父元素中的位置。在示例中，子区域位于第一列。

<area-model>
  <area-root id="layout" cols="3" rows="1" hspacing="25 25 50" vspacing="100" width="404mm" height="210mm" />
    <sub-area id="column-1" location="col-1" cols="1" rows="9" hspacing="100" vspacing="2 8 9 3 3 10 22 39 4" width="101mm" height="210mm">
    </sub-area>
  </area-root>
</area-model>

预期的结果将是我使用 Inkscape 创建的 SVG 的以下内容：

<svg>
 <g id="layout">
   <rect y="842" x="0" height="210" width="404" id="area-root" style="fill:none;stroke:#000000;stroke-width:1"/>
   <rect y="842" x="0" height="210" width="101" id="area-root-col-1" style="fill:none;stroke:#000000;stroke-width:1"/>
   <rect y="842" x="101" height="210" width="101" id="area-root-col-2" style="fill:none;stroke:#000000;stroke-width:1"/>
   <path id="column-1-row-1" d="m 0.50493076,847.86029 99.99013924,0" style="fill:none;stroke:#000000;stroke-width:1"/>
   <path id="column-1-row-2" d="m 0.50243229,869.8569 99.99513771,0" style="fill:none;stroke:#000000;stroke-width:1"/>
   <path id="column-1-row-3" d="m 0.50243229,888.85128 99.99513771,0" style="fill:none;stroke:#000000;stroke-width:1"/>
   <path id="column-1-row-4" d="m 0.50243229,894.8495 99.99513771,0" style="fill:none;stroke:#000000;stroke-width:1"/>
   <path id="column-1-row-5" d="m 0.50243229,900.84772 99.99513771,0" style="fill:none;stroke:#000000;stroke-width:1"/>
   <path id="column-1-row-6" d="m 0.50243229,921.8415 99.99513771,0" style="fill:none;stroke:#000000;stroke-width:1"/>
   <path id="column-1-row-7" d="m 0.50243229,963.82907 99.99513771,0" style="fill:none;stroke:#000000;stroke-width:1"/>
   <path id="column-1-row-8" d="m 0.50243229,1045.8048 99.99513771,0" style="fill:none;stroke:#000000;stroke-width:1"/>
</g>
</svg>

我的问题是，您将如何使用 XSLT 将 XML 转换为 SVG？

就我而言，最大的挑战是设计方法来计算 子区域 元素所需的测量值（位置、宽度和高度），以便将它们正确放置在列中或area-root 元素中定义的行。

另一方面，上面 SVG 中的 path 元素可以替换为 SVG 中重叠的 rect 元素，只要它反映了存储在XML。基本上，我所需要的只是 XML 文件的可视化表示。

提前非常感谢！如果需要进一步说明，请告诉我。

Answer 1

我的问题是，您将如何使用 XSLT 将 XML 转换为 SVG？

使用从每个元素属性到相应 SVG 的映射，如下例所示：

XML

<?xml version="1.0"?>
<dataSet>
  <bar fill="rgb(255,100,75)">
    <value>71</value>
    <desc>01</desc>
  </bar>
  <bar fill="rgb(0,225,0)">
    <value>89</value>
    <desc>02</desc>
  </bar>
  <bar fill="rgb(75,100,245)">
    <value>23</value>
    <desc>03</desc>
  </bar>
  <bar fill="rgb(200,200,200)">
    <value>108</value>
    <desc>04</desc>
  </bar>
  <bar fill="rgb(245,245,25)">
    <value>93</value>
    <desc>05</desc>
  </bar>
</dataSet>

XSLT

<?xml version="1.0" encoding="utf-8"?>
<xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" >
  <xsl:template match="dataSet">
    <svg width="200px" height="250px" xmlns="http://www.w3.org/2000/svg">
      <g id="bar" transform="translate(0,200)">
        <xsl:for-each select="bar">
          <xsl:variable name="val" select="value"/>
          <rect x="{position()*25}" y="-{$val*1.5}" height="{$val*1.5}" width="15" style="fill:{@fill};"/>
          <text x="{position()*25 + 7.5}" y="0" style="font-family:arial;text-anchor:middle;baseline-shift:-15;">
            <xsl:value-of select="desc"/>
          </text>
        </xsl:for-each>
      </g>
    </svg>
  </xsl:template>
</xsl:transform>

就我而言，最大的挑战是设计计算子区域元素所需测量值（位置、宽度和高度）的方法，以便将它们正确放置在区域根中定义的列或行中元素。

为此使用 CSS，如在这些不相关的问题中：

• Displaying a link within a hyperlinked area
• CSS: display:inline-block and positioning:absolute

参考文献

• Automated Tree Drawing: XSLT and SVG
• CSSPlay Rotary Gallery
• Create SVG bar charts from XML with XSLT