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