我正在尝试将一个SVG图像旁边的文本对齐一个XSL,然后用于创建一个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。
答案 0 :(得分:1)
如果方块的大小不变,您可以使用基线移位。鉴于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>
产生这个(为了清晰起见添加颜色):
答案 1 :(得分: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>
在alignment-baseline
上使用fo:instream-foreign-object
(请参阅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>