2014-02-19 69 views
3

我有一些问题在XSL-FO实现以下布局:XSL-FO边界重叠图形

enter image description here

我以为我会创建一个围绕它一个坚实的黑色边框是简单的块。 然后,我会将图像放在此区域的右上角,以便覆盖边框。最后,我可以给这个图像一个左边框和下边框。

编辑:这是我的用于放置image..In第一块我会试图将图像从块内放置代码,并且在从所述块之外的第二个。

<?xml version="1.0" encoding="UTF-8"?> 
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format"> 
    <!-- Layout--> 
    <fo:layout-master-set> 
     <fo:simple-page-master master-name = "ticket_layout" 
               page-height = "297mm" 
               page-width = "210mm" 
               margin-left = "10mm" 
               margin-right = "5mm" 
               margin-top = "10mm" 
               margin-bottom = "10mm"> 

      <fo:region-body margin-bottom = "20mm" margin-top = "25mm"/> 
     </fo:simple-page-master> 
    </fo:layout-master-set> 
    <!-- page sequence--> 
    <fo:page-sequence master-reference = "ticket_layout"> 
     <!-- Body--> 
     <fo:flow flow-name = "xsl-region-body"> 
     <!-- Info Image--> 
      <fo:block-container position="absolute" bottom="10" left="10"> 
       <fo:block text-align = "right"> 
        <fo:external-graphic src="url('Info_Icon.jpg')" border-left= "1pt solid black" border-bottom = "1pt solid black" content-height = "50%"/> 
       </fo:block> 
      </fo:block-container> 
      <!-- Table--> 
       <fo:table margin-top = "2mm" padding-bottom = "230mm" font-family = "Agenda" font-size = "11"> 
        <fo:table-body> 
         <fo:table-row> 
          <!-- InfoBlock1--> 
          <fo:table-cell > 
           <fo:block padding-bottom= "48mm" margin-right = "1mm" margin-bottom = "1mm" border = "1pt solid black" > 
            <!-- InfoImage--> 
            <fo:block-container position="absolute" bottom="60" left="110"> 
             <fo:block text-align = "right"> 
              <fo:external-graphic src="url('Info_Icon.jpg')" border-left= "1pt solid black" border-bottom = "1pt solid black" content-height = "50%"/> 
             </fo:block> 
            </fo:block-container> 
           </fo:block> 
          </fo:table-cell> 
          <!-- InfoBlock_2--> 
          <fo:table-cell > 
           <fo:block padding-bottom= "48mm" margin-left = "1mm" margin-bottom = "1mm" border = "1pt solid black"> 
           </fo:block> 
          </fo:table-cell> 
         </fo:table-row> 
        </fo:table-body> 
       </fo:table> 
     </fo:flow> 
    </fo:page-sequence> 
</fo:root> 

但我有问题将图像准确地放在边界上。它甚至有可能吗?

链接到图片:http://i.stack.imgur.com/9FvVr.jpg

我也很欢迎其他一些建议!

+0

请示出了完整的,最小的XSL-FO示例,您的问题仍然存在。这样,人们可以真正测试你的代码。 –

+0

对不起,你是对的。我改变了我的问题中的代码! – Zalem

+1

在我看来,将整个结构保存为图像并将其用作'fo:table-cell'的背景会更容易:http://www.w3.org/TR/xsl/#background-图片。 –

回答

0

在您的样品,则放置在包含更大的块内的{I}图像块。你永远不会让边界以这种方式重叠。根据定义,一个块在另一个块内。

有几种prossible解决方案:

  • 创建一个表,4个单元,使用单元格边框以创建边界图像
  • 使用背景图片(或者外部图形或嵌入SVG)为边界线
  • 使用2同级块的容器与绝对位置=“绝对”放置为彼此重叠,一个与所述盒内容,一个与{I}图像