代码之家  ›  专栏  ›  技术社区  ›  nullwriter

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

  •  2
  • nullwriter  · 技术社区  · 7 年前

    这就是我设置文本和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

    我希望文本“Mark If Closed”与方形SVG垂直居中。

    2 回复  |  直到 7 年前
        1
  •  1
  •   Kevin Brown    7 年前

                <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

        2
  •  1
  •   Tony Graham    7 年前

    让格式化程序进行数学运算(假设 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>
    

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

    Screenshot from formatting examples