xslt - XSL-FO 边界重叠图形

Question

我在 XSL-FO 中实现以下布局时遇到了一些问题:

我想我会创建一个简单的 block ，周围有黑色实线边框。然后我将图像放在这个 block 的右上角，以便它覆盖边框。最后我可以给这张图片一个左边框和下边框。

编辑:这是我放置图像的代码。在第一个 block 中，我将尝试从 block 内放置图像，在第二个 block 中，我将尝试从 block 外放置图像。

<?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

我也欢迎其他一些建议!

Answer 1

在您的示例中，您将包含 {i} 图像的 block 放在较大的 block 内。你永远不会让边界以这种方式重叠。根据定义，一个 block 在另一个 block 内。

有几种可能的解决方案:

• 创建一个包含 4 个单元格的表格，使用单元格边框创建边框图像
• 为边框线使用背景图像(外部图形或嵌入式 SVG)
• 使用 2 个带有 absolute-position="absolute"的同级 block 容器相互重叠放置，一个包含盒子内容，一个包含 {i} 图片