技术咨询：为何我的图片无法填充FOP父块？附代码示例

嘿，我来帮你排查这个问题！你的SVG没法填充父块，主要是几个属性配置的冲突和设置不到位导致的，咱们一步步来调整：

问题分析 #

从你提供的代码来看，核心问题出在这几个地方：

• fo:instream-foreign-object 设置了固定的 content-width="0.8cm" 和 content-height="0.3cm"，这会把SVG限制在这个固定尺寸里，没法自动适配父块的大小
• SVG本身定义了固定的 width="200" 和 height="100"，即使外部容器调整了，SVG也会保持自己的原始尺寸比例，不会主动填充容器
• scaling="non-uniform" 允许非等比缩放，但缺少让SVG完全填充容器的配套设置

解决方案 #

你可以按以下步骤修改代码，让SVG完全填充父块：

1. 让fo:instream-foreign-object适配父块
   把content-width和content-height改成100%，这样它就会占满父fo:block的整个空间：

<fo:block background-color="blue">
  <fo:instream-foreign-object background-color="yellow" content-width="100%" content-height="100%" scaling="non-uniform" vertical-align="middle">
    <!-- SVG内容 -->
  </fo:instream-foreign-object>
</fo:block>

2. 调整SVG的尺寸属性，让它自适应容器
   去掉SVG的固定width和height，保留viewBox来定义图形的坐标系统，同时添加preserveAspectRatio="none"，强制SVG拉伸填充整个容器（如果不需要保持原始比例的话）：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" preserveAspectRatio="none">
  <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>

补充说明 #

如果你希望SVG保持原始比例填充父块（不拉伸变形），可以把preserveAspectRatio改成xMidYMid meet（默认值），同时把scaling改成uniform，这样SVG会按比例缩放，尽可能填满父块，不会变形。

内容的提问来源于stack exchange，提问作者user1783416