How to Bring XSL-FO External Graphic to Front

Question

I'm trying to overlay a logo via <fo:external-graphic> to the svg gradient header of an XSL-FO page I'm working on.

<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>

The problem is, because the <fo:block> containing the image is before the gradient block, it renders behind the gradient. If there's a way to specify the draw-order, I imagine this would be the fastest solution.

I've tried placing the image inside the <svg> instead, as <image height="45" width="40" href="http://www.pdmagic.com/pdc/images/magic_hat.gif"/>, but this only renders as a broken image (the same goes for .png files).

Answer 1

As @MartinHonnen says, fo:block-container/@z-index will solve your problem. Setting @z-index to lower value than 0 (e.g. -1) will bring the fo:block-container with SVG graphic into lower stack level.

[Sample XSL-FO file]

<?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>

[The result]