Графическая пересечение XSL-FO

У меня есть некоторые проблемы с реализацией следующего макета в XSL-FO:

Я думал, что создам простой блок с сплошной черной рамкой вокруг него. Затем я поместил изображение в верхнем правом углу этого блока, чтобы он наложил границу. В конце я мог бы дать левую и нижнюю границу этому изображению.

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:region-body></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:external-graphic></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:external-graphic></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

Я также приветствую другие предложения!

1 ответ

В вашем примере вы разместили блок, содержащий изображение {i} внутри большего блока. Вы никогда не получите границы, чтобы пересечься таким образом. По определению, один блок находится внутри другого.

Существует несколько возможных решений:

  • создайте таблицу с 4 ячейками, используйте границы ячеек, чтобы создать изображение границы.
  • используйте фоновые изображения (внешние или графические или встроенные SVG) для пограничных линий
  • используйте 2 блок-контейнера для сиблинга с абсолютным положением = "абсолютный", расположенный для перекрытия друг друга, один с содержимым окна, один с изображением {i}

licensed under cc by-sa 3.0 with attribution.