Fatal编程技术网
  • xslt/
  • Xslt XSL-FO：如何防止流内异物被修剪？

Xslt XSL-FO：如何防止流内异物被修剪？

xslt svg

Xslt XSL-FO：如何防止流内异物被修剪？,xslt,svg,xsl-fo,apache-fop,Xslt,Svg,Xsl Fo,Apache Fop,我正在使用ApacheFop生成一个PDF，其中包含一个流内外来对象元素，其内容是svg文档。我遇到一个问题，最左边的边似乎被修剪掉了，如下所示： 这些图像被放置在一个表中。每个包含表格单元的大小由SVG中的宽度和高度属性设置。我尝试过修改宽度值，并将溢出属性显式设置为“可见”。这些都不起作用。我应该说，当应用程序在Windows机器上运行时，这种剪辑不会发生，但在Linux上可以看到。我不知道这是否是一个问题，正如W3C文档提到的，溢出可以根据操作系统进行不同的处理 包括来自flow元素的XS

我正在使用ApacheFop生成一个PDF，其中包含一个流内外来对象元素，其内容是svg文档。我遇到一个问题，最左边的边似乎被修剪掉了，如下所示：

这些图像被放置在一个表中。每个包含表格单元的大小由SVG中的宽度和高度属性设置。我尝试过修改宽度值，并将溢出属性显式设置为“可见”。这些都不起作用。我应该说，当应用程序在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>


XXXXXXXXXXXXXX
美国总数
现在的
以前的
0.00%
20.00%
40.00%
60.00%

谢谢

Brandt

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

根据字体列表，我猜测Windows使用Verdana，Linux使用Helvetica。选中此选项，确保所有平台上的字体都相同，或者在svg中设置一个视图框，使用neg x时该视图框稍大

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

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

如果操作系统之间存在差异，请检查在每个操作系统上使用的XSLT处理器。是一样的吗？您确定通过了相同的FO吗？如果java匹配、Xslt匹配和FOP版本匹配，则应该没有区别。svg是否有一个viewbox？也许您也应该发布一个svg示例。我在一些图表svg中看到了这一点，因为viewbox设置不正确，svg在y轴上有右对齐的标签-axis@KevinBrown我已经为上图附上了svg。我在svg文档中没有看到任何viewBox元素。我们将默认XSLT处理器与FOP:Xalan一起使用。您对字体的猜测可能是正确的。如果我在Linux服务器上将字体更改为Verdana，那么标签实际上是合适的。最让我困惑的是，在设置了包含svg的块的大小之后，“缩放到适合”是否应该确保流内异物中的svg适合单元格中的svg？不。这是因为SVG是在使用该字体渲染时计算的。使用错误的（较大的）字体不会改变SVG所说的“将此文本置于X=33，右锚定”这一事实。错误字体的标签可能是34或35宽，因此在SVG之外（x=-1）。由于没有视口，因此假定它从0,0变为宽度和高度。因此，该文本的边缘被剪裁。这就是为什么当我这样做的时候，我总是在SVG中插入一个视图框，给它一点空间（比如-5，-5，宽度+5，高度+5）。我会注意到上面的图像会有所不同，如果它按照你的想法做的话。左侧对齐，文本左侧对齐方式相同。第二个图像使用比第一个图像更小的字体（相同的字体大小，但字形更小）。“%”符号的右侧位于每个区域中完全相同的位置。只有文本根据glyph大小向左变长，并且首先用于计算SVG的文本比用于在FOP中渲染的文本小。因此，它被切断了。感谢您的精彩解释和示例。这些图表显示在表格单元格中这一事实会增加混淆吗