将文本垂直对齐xsl中的SVG旁边的文本

问题描述:

我试图对齐SVG图像旁边的文本插入XSL然后用于创建pdf。将文本垂直对齐xsl中的SVG旁边的文本

这是我的文本和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> 

这是输出:

enter image description here

我想要的文字“标记是否关闭”可垂直于与方形SVG中间。

如果广场的大小是恒定的,你可以玩基线移位。如果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> 

此息率(颜色增加了清晰度):

enter image description here

+0

非常感谢!我无法在网上找到很多信息。这使得伎俩。 – nullwriter

让格式化做出来......

请格式化做数学题(假设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-baselinefo: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> 

Screenshot from formatting examples

+0

仅供参考,如果发布人使用他设置为标签的FOP,则只有第三个选项有效。你的例子没有确定地使用FOP。 –