2014-02-19 3 views
3

내가 XSL-FO에 다음과 같은 레이아웃을 실현 몇 가지 문제가 있습니다XSL-FO 국경 중첩 그래픽

enter image description here

내가 주위에 검은 색 테두리가 간단한 블록을 만들 거라고 생각

. 그런 다음이 블록의 오른쪽 위 모서리에 이미지를 배치하여 테두리를 오버레이합니다. 마지막에는이 이미지에 왼쪽과 아래쪽 테두리를 줄 수있었습니다.

EDIT : 이것은 이미지 삽입을위한 코드입니다. 첫 번째 블록에서는 이미지를 블록 내부에서 배치하려고 시도하고 두 번째 블록에서는 블록 외부에서 배치하려고합니다.

<?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} 화상