如何将XSL-FO外部图形带到前面

Question

我试图通过<fo:external-graphic>将徽标覆盖到我正在处理的XSL-FO页面的svg渐变标题中。

<fo:block top="0mm" left="0mm" padding="0mm" margin="0mm" line-height="0mm">
    <fo:external-graphic padding="0mm" margin="0mm" content-width="20mm" content-height="20mm" width="0mm" height="0mm" src="http://www.pdmagic.com/pdc/images/magic_hat.gif"/>
</fo:block>
<fo:block text-align="center" intrusion-displace="none">
    <fo:instream-foreign-object border="solid black 1px" content-width="10.5in" content-height="0.556in">
        <svg xml:space="preserve" viewBox="0 0 850 45">
            <g>
                <defs>
                    <linearGradient id="topGrad" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
                        <stop offset="0%" stop-color="#FFFFFF"/>
                        <stop offset="100%" stop-color="{$UserDefinedColor}"/>
                    </linearGradient>
                </defs>
                <rect x="0" y="0" width="850" height="45" style="fill: url(#topGrad); stroke: black;" />
            </g>
        </svg>
    </fo:instream-foreign-object>
</fo:block>

问题是，因为包含图像的<fo:block>位于渐变块it renders behind the gradient之前。如果有一种指定绘制顺序的方法，我想这将是最快的解决方案。

我已尝试将图片放在<svg>内，而不是<image height="45" width="40" href="http://www.pdmagic.com/pdc/images/magic_hat.gif"/>，但这只会呈现为损坏的图像（.png文件也是如此）。

Answer 1

正如@MartinHonnen所说，fo：block-container / @ z-index将解决您的问题。将@ z-index设置为低于0的值（例如-1）将使具有SVG图形的fo：block-container进入较低的堆栈级别。

[样本XSL-FO文件]

<?xml version="1.0" encoding="UTF-8"?>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format"
    xmlns:axf="http://www.antennahouse.com/names/XSL/Extensions" font-size="11pt" xml:lang="en-US"
    id="id_document">
    <fo:layout-master-set>
        <fo:simple-page-master master-name="spm" page-width="10.5in" page-height="5in">
            <fo:region-body margin-top="0.556in" margin-bottom="0.5in" margin-left="0.5in"
                margin-right="0.5in" overflow="error-if-overflow"/>
            <fo:region-before extent="0.556in" precedence="false" />
            <fo:region-start extent="0.5in"/>
            <fo:region-end extent="0.5in"/>
        </fo:simple-page-master>
    </fo:layout-master-set>
    <fo:page-sequence master-reference="spm" reference-orientation="from-page-master-region()"
        writing-mode="from-page-master-region()">
        <fo:static-content flow-name="xsl-region-before">
            <fo:block line-height="0mm" font-size="0mm">
                <fo:external-graphic padding="0mm" margin="0mm" content-width="20mm"
                    content-height="0.556in"
                    src="http://www.pdmagic.com/pdc/images/magic_hat.gif"/>
            </fo:block>
            <fo:block-container width="10.5in - 0.5in - 0.5in" height="100%" absolute-position="absolute" z-index="-1">
                <fo:block line-height="0mm" font-size="0mm">
                    <fo:instream-foreign-object border="solid black 1px">
                        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 850 45">
                        <g>
                            <defs>
                                <linearGradient id="topGrad" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
                                    <stop offset="0%" stop-color="#FFFFFF"/>
                                    <stop offset="100%" stop-color="{$UserDefinedColor}"/>
                                </linearGradient>
                            </defs>
                            <rect x="0" y="0" width="850" height="45" style="fill: url(#topGrad); stroke: black;"/>
                        </g>
                    </svg>
                    </fo:instream-foreign-object>
                </fo:block>
            </fo:block-container>
        </fo:static-content>
        <fo:flow flow-name="xsl-region-body">
            <fo:block font-size="1.2em" space-before="2mm" space-before.conditionality="retain">Z-index test</fo:block>
            <fo:block>Body text.</fo:block>
            <fo:block>Body text.</fo:block>
            <fo:block>Body text.</fo:block>
            <fo:block>Body text.</fo:block>
            <fo:block>Body text.</fo:block>
        </fo:flow>
    </fo:page-sequence>
</fo:root>

[结果]