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) для пограничных линий
  • используют два родственных блок-контейнеры с абсолютным-положением = «абсолютный» помещено, чтобы перекрывать друг друг, один с содержимым коробки, одна с {I} изображениями
Смежные вопросы