Question

我正在使用Apache FOP生成包含一个instream-foreign-object元素的PDF，其内容是一个svg文档。我遇到的问题是，最左边的边缘似乎正在被修剪掉： enter image description here

这些图像放在一张桌子上。每个包含表格单元格的大小由SVG中的width和height属性设置。我尝试修改宽度值并明确将溢出属性设置为“可见”。这些都不起作用。我应该说，当应用程序在Windows机器上运行时，不会发生此剪辑，但在Linux上可以看到这种情况。我不知道这是否是一个问题，因为W3C文档提到溢出可以基于操作系统进行不同的处理。

包括来自flow元素的XSL的相关部分以及将svg应用于模板的模板。有人可以帮忙吗？

<fo:page-sequence id="chartsPage" master-reference="landscape">
                    <fo:static-content flow-name="xsl-region-after">
                        <xsl:apply-templates select="exports/export" />
                    </fo:static-content>
                    <fo:flow flow-name="xsl-region-body">
                        <fo:block id="headersBlock" margin-top="0.5in" font-family="arial, helvetica, sans-serif" color="#5c068c" font-weight="bold" text-align="center">
                            <xsl:apply-templates select="exports/export/headers"/>
                        </fo:block>
                        <fo:block id="chartBlock" text-align="center">
                            <fo:table>
                                <fo:table-body>
                                    <fo:table-row>
                                        <xsl:apply-templates select="exports/export/charts/chart" />
                                    </fo:table-row>
                                </fo:table-body>
                            </fo:table>
                        </fo:block>...</fo:flow>

这是图表模板元素。每个输入图表元素都包含一个svg文档：

<xsl:template match="chart">
    <fo:table-cell>
        <fo:block width="{svg:svg/@width}px">
            <fo:instream-foreign-object width="80%" content-width="scale-to-fit" content-height="100%" scaling="uniform">
                <svg:svg width="{svg:svg/@width}" height="{svg:svg/@height}">
                    <xsl:copy-of select="svg:svg"/>
                </svg:svg>
            </fo:instream-foreign-object>
        </fo:block>
    </fo:table-cell>
</xsl:template>

以下是上图中的svg。请注意，此帖中包含的图片剪裁了图表标题和其他一些文字。它们在所有情况下都能正确显示。我只附上了麻烦点。

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="400">
<defs>
    <clipPath id="highcharts-59">
        <rect rx="0" ry="0" fill="none" x="0" y="0" width="9999" height="400" stroke-width="0.000001"/>
    </clipPath>
    <clipPath id="highcharts-60">
        <rect fill="none" x="0" y="0" width="757" height="210"/>
    </clipPath>
</defs>
<rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" width="800" height="400" stroke-width="0.000001"/>
<g class="highcharts-grid" />
<g class="highcharts-grid" >
    <path fill="none" d="M 33 215.5 L 790 215.5" stroke="#C0C0C0" stroke-width="1" />
    <path fill="none" d="M 33 145.5 L 790 145.5" stroke="#C0C0C0" stroke-width="1" />
    <path fill="none" d="M 33 75.5 L 790 75.5" stroke="#C0C0C0" stroke-width="1" />
    <path fill="none" d="M 33 285.5 L 790 285.5" stroke="#C0C0C0" stroke-width="1" />
</g><g class="highcharts-axis" >
    <path fill="none" d="M 789.5 285 L 789.5 290" stroke="#C0D0E0" stroke-width="1"/>
    <path fill="none" d="M 33 285.5 L 790 285.5" stroke="#C0D0E0" stroke-width="1"  visibility="visible"/>
</g><g class="highcharts-axis" />
<g class="highcharts-series-group" >
    <g class="highcharts-series" visibility="visible"  transform="translate(33,75)" clip-path="url(#highcharts-60)">
        <rect fill="#00569b" x="151" y="41" width="228" height="169" stroke-width="0.000001" stroke="#FFFFFF" rx="0" ry="0"/>
    </g><g class="highcharts-markers" visibility="visible"  transform="translate(33,75)" clip-path="none"/>
    <g class="highcharts-series" visibility="visible"  transform="translate(33,75)" clip-path="url(#highcharts-60)">
        <rect fill="#80abcd" x="378" y="31" width="228" height="179" stroke-width="0.000001" stroke="#FFFFFF" rx="0" ry="0"/>
    </g><g class="highcharts-markers" visibility="visible"  transform="translate(33,75)" clip-path="none"/>
    <g class="highcharts-series" visibility="visible"  transform="translate(33,75)" clip-path="url(#highcharts-60)">
        <path fill="none" d="M 0 0" stroke="black" stroke-width="5"   stroke-opacity="0.049999999999999996" transform="translate(1, 1)"/>
        <path fill="none" d="M 0 0" stroke="black" stroke-width="3"   stroke-opacity="0.09999999999999999" transform="translate(1, 1)"/>
        <path fill="none" d="M 0 0" stroke="black" stroke-width="1"   stroke-opacity="0.15" transform="translate(1, 1)"/>
        <path fill="none" d="M 0 0" stroke="#000000" stroke-width="2" />
    </g><g class="highcharts-markers" visibility="visible"  transform="translate(33,75)" clip-path="none">
        <path fill="#000000" d="M 378.50000000000006 67.1 C 383.82800000000003 67.1 383.82800000000003 75.1 378.50000000000006 75.1 C 373.1720000000001 75.1 373.1720000000001 67.1 378.50000000000006 67.1 Z" stroke="#FFFFFF" stroke-width="0.000001"/>
    </g>
</g>
<text x="395" y="25" style="font-family:arial,helvetica,sans-serif;font-size:12px;color:#3e576f;font-weight:bold;fill:#3e576f;" text-anchor="middle" class="highcharts-title" >
    <tspan x="395">XXXXXXXX XXXXXX</tspan>
</text>
<path fill="none" d="M 33 146 L 790 146" stroke="#000000" stroke-width="2" />
<g class="highcharts-legend"  transform="translate(353,295)">
    <g  clip-path="url(#highcharts-59)">
        <g>
            <g class="highcharts-legend-item"  transform="translate(8,3)">
                <path fill="none" d="M 0 11 L 16 11" stroke-width="2" stroke="#000000"/>
                <path fill="#000000" d="M 8 7 C 13.328 7 13.328 15 8 15 C 2.6719999999999997 15 2.6719999999999997 7 8 7 Z" stroke="#FFFFFF" stroke-width="0.000001"/>
                <text x="21" y="15" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:12px;cursor:pointer;color:#3e576f;font-weight:normal;padding-bottom:10;fill:#3e576f;" text-anchor="start" >
                    <tspan x="21">U.S. Total</tspan>
                </text>
            </g><g class="highcharts-legend-item"  transform="translate(8,32)">
                <text x="21" y="15" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:12px;cursor:pointer;color:#3e576f;font-weight:normal;padding-bottom:10;fill:#3e576f;" text-anchor="start" >
                    <tspan x="21">Current</tspan>
                </text>
                <rect rx="2" ry="2" fill="#80abcd" x="0" y="4" width="16" height="12" stroke-width="0.000001"  stroke="#80abcd"/>
            </g><g class="highcharts-legend-item"  transform="translate(8,61)">
                <text x="21" y="15" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:12px;cursor:pointer;color:#3e576f;font-weight:normal;padding-bottom:10;fill:#3e576f;" text-anchor="start" >
                    <tspan x="21">Previous</tspan>
                </text>
                <rect rx="2" ry="2" fill="#00569b" x="0" y="4" width="16" height="12" stroke-width="0.000001"  stroke="#00569b"/>
            </g>
        </g>
    </g>
</g><g class="highcharts-axis-labels" >
    <text x="411.5" y="299" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:11px;width:737px;color:#666;line-height:14px;fill:#666;" text-anchor="middle"/>
</g><g class="highcharts-axis-labels" >
    <text x="33" y="290" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:8.6px;width:359px;color:#666;line-height:14px;fill:#666;" text-anchor="end">
        <tspan x="33">0.00%</tspan>
    </text>
    <text x="33" y="220" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:8.6px;width:359px;color:#666;line-height:14px;fill:#666;" text-anchor="end">
        <tspan x="33">20.00%</tspan>
    </text>
    <text x="33" y="150" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:8.6px;width:359px;color:#666;line-height:14px;fill:#666;" text-anchor="end">
        <tspan x="33">40.00%</tspan>
    </text>
    <text x="33" y="80" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:8.6px;width:359px;color:#666;line-height:14px;fill:#666;" text-anchor="end">
        <tspan x="33">60.00%</tspan>
    </text>
</g><g class="highcharts-tracker" >
    <g visibility="visible"  transform="translate(33,75)" clip-path="url(#highcharts-60)">
        <rect fill="rgb(192,192,192)" x="151" y="41" width="228" height="169" isTracker="1404735525027" fill-opacity="0.0001" visibility="visible" style=""/>
    </g><g visibility="visible"  transform="translate(33,75)" clip-path="url(#highcharts-60)">
        <rect fill="rgb(192,192,192)" x="378" y="31" width="228" height="179" isTracker="1404735525028" fill-opacity="0.0001" visibility="visible" style=""/>
    </g><g visibility="visible"  transform="translate(33,75)" clip-path="url(#highcharts-60)">
        <path fill="none" d="M 368.50000000000006 71.1 L 388.50000000000006 71.1" isTracker="true" stroke-linejoin="round" visibility="visible" stroke-opacity="0.0001" stroke="rgb(192,192,192)" stroke-width="22" style=""/>
    </g>
</g>

谢谢，

布氏

Answer 1

我相信我知道这个问题，它可能解释了操作系统的明显差异。 Highcharts可能会根据使用的实际字体的字体大小计算所有位置。 x轴标签位于右侧33处。您正在格式化两个不同的FOP实例，一个使用相同的字体Highcharts或一个相似。一个字体较大，但仍与文本中的字体选项相匹配（请参阅SVG中的字体列表）。较大的文本跨度会大于33。

我根据字体列表的猜测是Windows使用的Verdana和Linux使用的是Helvetica。检查一下，确保所有平台上都有相同的字体，或者在svg中设置一个视图，使用neg x稍大一些。

在测试我的猜测时，这是你的SVG在同一输出中的两次。我只更改了SVG中的字体选择以强制使用不同的字体。你可以看到差异。可能“剪裁”环境中的字体大于用于确定SVG中间距的字体。

enter image description here

为了在下面的评论中证明这一点，使用你精确的SVG我只是添加了更多的字符（模拟更大的字体宽度）。你看，我加入了“CUTOFFF”这个词，它就被切断了。它不会在“之后”移位，它由Highchart计算，你在FO中进行的任何缩放都是无意义的。该文本在SVG之外。

enter image description here

XSL-FO：如何防止修剪Instream异物？

1 个答案: