如何將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> 

[結果]