XSLT转换后输出仅显示第一页、SVG图表被截断问题求助

架构老林

2026-9-29

问题根因

你代码中硬编码了SVG的固定高度为900px，同时`viewBox`属性也限制了可视区域高度为900，SVG默认会裁剪超出可视区域的内容。你统计的欧洲国家有几十个，每个国家的三条GDP柱状图需要占用`$bar-height + $bar-spacing = 70px`的垂直空间，所有国家渲染完成后总高度远超过900px，因此底部内容被截断。

修复方案

1. 动态计算SVG总高度

先统计欧洲国家总数，根据国家数量动态计算需要的SVG高度，替换原硬编码的svg-height变量：

<!-- 先统计欧洲国家总数 -->
<xsl:variable name="european-country-count" select="count(/mondial/country[encompassed/@continent='europe'])"/>
<xsl:variable name="svg-width" select="1200"/>
<!-- 总高度=国家数*单国占用高度 + 顶部偏移100px + 底部预留50px余量 -->
<xsl:variable name="svg-height" select="$european-country-count * ($bar-height + $bar-spacing) + 150"/>

2. 清理冗余代码

你在全局作用域定义的bar-width1/2/3、gdp_agri/ind/serv变量属于无效代码，全局上下文下无法获取每个国家的字段值，直接删除即可。

3. 修复重复ID问题

你当前每个国家的三个<g>标签都使用了同一个id="bar_{position()}"，不符合HTML规范，建议修改为区分后缀：

<g id="bar_agri_{position()}">...</g>
<g id="bar_ind_{position()}">...</g>
<g id="bar_serv_{position()}">...</g>

4. PDF打印适配（可选）

如果需要导出PDF不截断单个国家的内容，可以在HTML的<head>中添加打印样式：

<html>
  <head>
    <style type="text/css">
      @page { size: A4 portrait; margin: 2cm; }
      g { page-break-inside: avoid; }
    </style>
  </head>
  <body>
    <!-- 原有SVG代码 -->
  </body>
</html>