在 xsl 中将文本垂直对齐到 SVG 旁边答案

【问题标题】：Align text vertically next to SVG in xsl在 xsl 中将文本垂直对齐到 SVG 旁边
【发布时间】：2018-02-04 14:29:36
【问题描述】：

我正在尝试在 XSL 中对齐 SVG 图像旁边的文本，然后用于创建 pdf。

这是我设置文本和 SVG 的地方：

<fo:block font-size="14pt" text-align="center" margin-top="2cm">
    <fo:instream-foreign-object>
        <svg:svg width="30" height="30" xml:space="preserve">
            <svg:g style="fill:none; stroke:black; stroke-width:1">
                <svg:rect x="0" y="0" width="30" height="30"/>
            </svg:g>
        </svg:svg>
    </fo:instream-foreign-object>

    Mark If Closed
</fo:block>

这是输出：

我希望文本“Mark If Closed”垂直位于方形 SVG 的中间。

【问题讨论】：

标签： pdf xslt svg xsl-fo apache-fop

【解决方案1】：

让格式化程序解决它...

让格式化程序做数学运算（假设line-height（见https://www.w3.org/TR/xsl11/#line-height）是'1.2'）：

<fo:block font-size="14pt" text-align="center" margin-top="2pt"
    background-color="silver">
    <fo:instream-foreign-object baseline-shift="-((30pt - 1em * 1.2) div 2)">
        <svg:svg xmlns:svg="http://www.w3.org/2000/svg" width="30" height="30" xml:space="preserve">
    <svg:g style="fill:none; stroke:black; stroke-width:1">
        <svg:rect x="0" y="0" width="30" height="30" />
    </svg:g>
</svg:svg>
    </fo:instream-foreign-object>
    <fo:inline background-color="yellow">Mark If Closed</fo:inline>
</fo:block>

将框向下移动 50%：

<fo:block font-size="14pt" text-align="center" margin-top="2pt"
    background-color="silver">
    <fo:instream-foreign-object baseline-shift="-50%">
        <svg:svg xmlns:svg="http://www.w3.org/2000/svg" width="30" height="30" xml:space="preserve">
            <svg:g style="fill:none; stroke:black; stroke-width:1">
                <svg:rect x="0" y="0" width="30" height="30" />
            </svg:g>
        </svg:svg>
    </fo:instream-foreign-object>
    <fo:inline background-color="yellow">Mark If Closed</fo:inline>
</fo:block>

在fo:instream-foreign-object 上使用alignment-baseline（参见https://www.w3.org/TR/xsl11/#alignment-baseline）：

<fo:block font-size="14pt" text-align="center" margin-top="2pt"
    background-color="silver">
    <fo:instream-foreign-object alignment-baseline="middle">
        <svg:svg xmlns:svg="http://www.w3.org/2000/svg" width="30" height="30" xml:space="preserve">
    <svg:g style="fill:none; stroke:black; stroke-width:1">
        <svg:rect x="0" y="0" width="30" height="30" />
    </svg:g>
</svg:svg>
    </fo:instream-foreign-object>
    <fo:inline background-color="yellow">Mark If Closed</fo:inline>
</fo:block>

【讨论】：

仅供参考，如果发帖人使用他设置为标签的 FOP，则只有第三个选项有效。您的示例肯定没有使用 FOP。

【解决方案2】：

如果正方形的大小是恒定的，您可以使用基线移位。鉴于 SVG 高度为 30，字体大小为 14pt，基线偏移大约 5pt 就可以了。

            <fo:block font-size="14pt" text-align="center" background-color="silver">
            <fo:instream-foreign-object>
                <svg:svg xmlns:svg="http://www.w3.org/2000/svg" width="30" height="30" xml:space="preserve">
                        <svg:g style="fill:none; stroke:black; stroke-width:1">
                            <svg:rect x="0" y="0" width="30" height="30"/>
                        </svg:g>
                </svg:svg>
            </fo:instream-foreign-object><fo:inline background-color="yellow" baseline-shift="5pt">Mark If Closed</fo:inline></fo:block>

产生这个（为清楚起见添加了颜色）：

【讨论】：

非常感谢！！我在网上找不到太多信息。这成功了。