Question

在我的XML文件中，我有一个表示打印文档的物理布局的注释，我想使用SVG格式绘制的简单网格来显示它。

使用一组元素描述所讨论的文档，这些元素在下面举例说明。首先， area-model 元素定义文档的宽度和高度，以及文档垂直（1行）和水平（3列）的分割方式。

使用hspacing和vspacing属性定义列和行，其属性值为width和height属性的百分比。

然后使用嵌套的子区域元素详细说明 area-model 元素中定义的初始布局，这些元素具有与布局的物理特征相关的类似属性。在这种情况下，第一列总共有九行。 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 元素，只要它反映了存储在SVG中的信息。 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，就像这些无关的问题一样：

<强>参考

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

1 个答案:

XML

XSLT