SVG 中的溢出

Question

我正在使用 XSLT 来显示游戏列表。每个游戏根据其在数据库中的位置 (y="{($position)*10}%") 进行定位。我的问题是，当数据库中有太多游戏时，这些游戏不会显示。我也尝试使用 with overflow="scroll" 但这没有用。如何在数据库增长时也显示我的输出，以便我可以滚动查看所有游戏？

<xsl:template match="/">
        <svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg" overflow="scroll">
            <xsl:for-each select="//game">
                <xsl:variable name="gameid" select="@gameid"/>
                <xsl:variable name="name1" select="players/player[@id='1']/name"/>
                <xsl:variable name="name2" select="players/player[@id='2']/name"/>
                <xsl:variable name="points1" select="players/player[@id='1']/points"/>
                <xsl:variable name="points2" select="players/player[@id='2']/points"/>
                <xsl:variable name="position" select="position()"/>
                <text x="10%" y="{($position)*10}%" font-family="Verdana" font-size="100%">Id:</text>
                <text x="18%" y="{($position)*10}%" font-family="Verdana" font-size="100%" ><xsl:value-of select="$gameid"/></text>
                <text x="25%" y="{($position)*10}%" font-family="Verdana" font-size="100%"><xsl:value-of select="$name1"/>(<xsl:value-of select="$points1"/>) vs. <xsl:value-of select="$name2"/>(<xsl:value-of select="$points2"/>)</text>  
            </xsl:for-each>
        </svg> 
 </xsl:template>

这里是xml文件的一部分。在数据库中，这个 xml 文件多次包含不同的值。

<game gameid="2018-02-24T20:31:49.058>
 <players>
   <player id="1" playing="true">
     <name></name>
     <points>0</points>
   </player>
   <player id="2" playing="false">
     <name>awd</name>
     <points>0</points>
   </player>
 </players>
</game>

Answer 1

问题在于您使用表达式y="{($position)*10}%" 设置了垂直位置相对百分比。因此，当$position 大于 10 时，百分比值超过 100% 标记并且该项目将不会被显示（例如，第 11 个项目为 110%）。

所以一个解决方案是使用绝对值（例如px）：

{($position)*40}px

您还必须以同样的方式设置<svg height="...px"...。

如果您想使用滚动条来显示很多项目，this SO question "How to get ScrollBars in SVG?" 可能会有所帮助。