Почему моя картинка не заполняет родительский блок

Это мой ФОП:

<fo:block background-color="blue">
<fo:instream-foreign-object background-color="yellow" content-width="0.8cm" content-height="0.3cm" scaling="non-uniform" vertical-align="middle">
    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100">
        <g>
            <path d="m 0 0 l 200 0 l -50 100 l -150 0 z"/>
            <text x="140" y="80"
                style="font-family: Times New Roman;
                font-size: 80px;
                text-align:end;
                text-anchor:end;
                fill: white;">12</text>
        </g>
    </svg>
</fo:instream-foreign-object>
</fo:block>

Вот такой рендер с appache FOP версии 2:

fop.pdf

Почему SVG не заполняет родительский блок?


apache-fop xsl-fo
person user1783416    schedule 23.04.2018    source источник
comment
FOP описывает себя как средство форматирования печати, управляемое объектами форматирования XSL (XSL-FO) (см. w3.org/ TR/xsl11), и ваша разметка также работает с другими форматировщиками, помимо FOP.   -  person Tony Graham    schedule 23.04.2018

Ответы (1)


arrow_upward
1
arrow_downward

content-width="0.8cm" content-height="0.3cm" scaling="non-uniform" заставляет изображение иметь ширину 0,8 см и высоту 0,3 см.

Если вы хотите заполнить ширину, измените ее на content-width="scale-to-fit" width="100%":

<fo:block background-color="blue" font-size="0">
    <fo:instream-foreign-object background-color="yellow" content-width="scale-to-fit" width="100%">
        <svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100">
            <g>
                <path d="m 0 0 l 200 0 l -50 100 l -150 0 z"/>
                <text x="140" y="80"
                    style="font-family: Times New Roman;
                    font-size: 80px;
                    text-align:end;
                    text-anchor:end;
                    fill: white;">12</text>
            </g>
        </svg>
    </fo:instream-foreign-object>
</fo:block>
person Tony Graham    schedule 23.04.2018
comment
Если ваша проблема заключается только в синих над и под SVG, вас может больше заинтересовать font-size="0" как способ удалить «половину ведущего» (см., например, w3.org/TR/xsl11/#line-height), что является причиной синего цвета над и под строкой. - person Tony Graham; 23.04.2018
comment
Поскольку вы используете font-size="0" в stackoverflow.com/questions/50020129/, рассмотрите возможность принятия этого ответа. - person Tony Graham; 25.04.2018