使用多个XSL文件,生成多个SVG标记,因此页面无法按预期呈现

时间:2013-08-22 12:39:41

标签: c# xml xslt

我在服务器端代码中生成XML文件,并使用XslCompiledTransform.Transform将它们转换为外部XSL文件。

其中一个XSL文件的示例如下:

<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl='http://www.w3.org/1999/XSL/Transform' version='1.0'>
  <xsl:param name='x' />
  <xsl:param name='y' />
  <xsl:param name='channel_number' />
  <xsl:param name='sequence_colour' />
  <xsl:param name='sequence_stroke' />
  <xsl:template match='/Sensor'>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <g transform="translate({$x},{$y})" id="S{$channel_number}">
        <rect x="85" y="0" width="90" height="30" rx="10" fill="#FFFFFF" stroke="{$sequence_colour}" stroke-width="{$sequence_stroke}" />
        <rect x="12" y="32" width="8" height="18" fill="#FFFFFF" stroke="black" stroke-width="1" />
        <rect x="20" y="55" width="220" height="95" fill="#F5F5FF" stroke="black" stroke-width="1" />
        <rect x="20" y="80" width="30" height="40" fill="#FFFFFF" stroke="black" stroke-width="1" />
        <line x1="20" y1="100" x2="50" y2="100" stroke="black" stroke-width="2" />
      </g>
    </svg>
  </xsl:template>
</xsl:stylesheet>

当我对单个对象执行此操作时,它可以正常工作。

当我想在同一页面上显示两个或多个对象时,会出现问题。它们不是彼此相邻,而是在物体之间存在整个屏幕高度。

最终标记的样本是:

<Root>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(170.5,40.5)" id="S1">
        <rect x="85" y="0" width="90" height="30" rx="10" fill="#FFFFFF" stroke="black" stroke-width="1" />
        <rect x="12" y="32" width="8" height="18" fill="#FFFFFF" stroke="black" stroke-width="1" />
        <rect x="20" y="55" width="220" height="95" fill="#F5F5FF" stroke="black" stroke-width="1" />
        <rect x="20" y="80" width="30" height="40" fill="#FFFFFF" stroke="black" stroke-width="1" />
        <line x1="20" y1="100" x2="50" y2="100" stroke="black" stroke-width="2" />
      </g>
    </svg>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(570.5,40.5)" id="S2">
      <rect x="85.5" y="0.5" width="90" height="30" rx="10" fill="#FFFFFF" stroke="black" stroke-width="1" />
      <rect x="12.5" y="32.5" width="8" height="18" fill="#FFFFFF" stroke="black" stroke-width="1" />
      <line x1="0.5" y1="40.5" x2="20" y2="40.5" stroke="black" stroke-width="1" />
      <line x1="220.5" y1="110.5" x2="240" y2="110.5" stroke="black" stroke-width="1" />
      <text x="95.5" y="80.5" font-family="sans-serif" font-size="20px" font-weight="bold" fill="black">S</text>
      <circle cx="275.5" cy="110.5" r="15" stroke="black" stroke-width="2" fill="#FFFFFF" />
    </g>
  </svg>
</Root>

翻译中包含正确的数字(170.5,40.5)和(570.5,40.5)。 y值是相同的,所以我希望SVG图形彼此并排显示,但事实并非如此。

我认为这是由于有多个SVG标签,但我不知道如何克服这个问题,因为我正在从多个XSL文件进行转换。

编辑:它肯定有多个SVG标签。我复制了源HTML,将其保存到一个文件中,编辑了额外的SVG标签,因此它只有顶部的svg标签,其中有一个关闭的svg标签,并且它完全按照预期呈现。

如何更改创建HTML的方式只有一个SVG标记?

0 个答案:

没有答案