2

我在服务器端代码中生成 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 标签？

4

0 回答 0