Apache FOP导出PDF时环形图边框过厚问题求助

问题原因 #

你的SVG设置了viewBox="0 0 42 42"，同时外层指定了width="200" height="200"，SVG会被放大约4.76倍（200/42）。默认情况下，SVG的stroke-width会跟随图形一起缩放，原本设置的stroke-width="3"会被放大到约14，导致PDF中边框看起来异常厚重。此外，Apache FOP对SVG的描边缩放处理逻辑和浏览器存在差异，进一步加剧了这个问题。

解决方案 #

1. 使用vector-effect="non-scaling-stroke"固定描边宽度 #

给所有带stroke的<circle>元素添加vector-effect="non-scaling-stroke"属性，让描边宽度不随SVG的缩放而变化，保持原始设置的3个用户单位：

<fo:block text-align="center">
    <fo:instream-foreign-object>
        <svg width="200" height="200" viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
            <!-- Background circle -->
            <circle cx="21" cy="21" r="15.915" fill="transparent" stroke="grey" stroke-width="3" vector-effect="non-scaling-stroke"></circle>

            <!-- Donut chart segments -->
            <circle cx="21" cy="21" r="15.915" fill="transparent" stroke="blue" stroke-width="3" stroke-dasharray="67.3 32.7"
                    stroke-dashoffset="0" vector-effect="non-scaling-stroke"></circle>
            <circle cx="21" cy="21" r="15.915" fill="transparent" stroke="black" stroke-width="3" stroke-dasharray="20.3 79.7"
                    stroke-dashoffset="-67.3" vector-effect="non-scaling-stroke"></circle>

            <!-- Inner circle for the donut hole -->
            <circle cx="21" cy="21" r="10" fill="white"></circle>

            <!-- Label inside the donut chart -->
        </svg>
    </fo:instream-foreign-object>
</fo:block>

2. 调整SVG尺寸与viewBox一致，外层通过FO控制缩放 #

如果vector-effect在你的FOP版本中不支持，可以将SVG的width和height设置为与viewBox相同的42x42，然后通过FO的scale属性控制整体缩放，避免描边被意外放大：

<fo:block text-align="center">
    <fo:instream-foreign-object scale="4.76"> <!-- 200/42≈4.76，对应原尺寸 -->
        <svg width="42" height="42" viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
            <!-- Background circle -->
            <circle cx="21" cy="21" r="15.915" fill="transparent" stroke="grey" stroke-width="3"></circle>

            <!-- Donut chart segments -->
            <circle cx="21" cy="21" r="15.915" fill="transparent" stroke="blue" stroke-width="3" stroke-dasharray="67.3 32.7"
                    stroke-dashoffset="0"></circle>
            <circle cx="21" cy="21" r="15.915" fill="transparent" stroke="black" stroke-width="3" stroke-dasharray="20.3 79.7"
                    stroke-dashoffset="-67.3"></circle>

            <!-- Inner circle for the donut hole -->
            <circle cx="21" cy="21" r="10" fill="white"></circle>

            <!-- Label inside the donut chart -->
        </svg>
    </fo:instream-foreign-object>
</fo:block>

3. 升级Apache FOP到最新版本 #

旧版本的Apache FOP对SVG的支持存在兼容性问题，升级到最新稳定版（如2.8或更高）可能修复描边渲染的异常问题。

验证方法 #

修改后重新生成PDF，对比浏览器中SVG的显示效果，确认环形图边框厚度一致即可。

内容的提问来源于stack exchange，提问作者priyanka Dhiman