EPUB插入SVG插图后出现空白页的解决办法求助

针对你遇到的小屏幕设备上SVG插图后出现空白页、且添加margin: 0 auto后问题重现的情况，可以尝试以下修复方案：

1. 修复CSS的margin冲突 #

你的当前CSS里同时定义了margin-left: 2em和margin: 0 auto，后者会完全覆盖前者，可能引发布局计算异常。先清理冲突样式：

.illustration {
  width: 40%;
  margin: 0 auto; /* 保留居中样式，移除重复的margin-left */
  page-break-inside: avoid;
  page-break-after: avoid;
}

2. 约束SVG容器与内部元素的尺寸 #

部分EPUB渲染器对SVG的块级布局计算存在偏差，给object元素添加明确样式，确保它自适应容器且不溢出：

.illustration object {
  display: block;
  width: 100%;
  height: auto;
  max-height: 90vh; /* 限制最大高度，避免超出视口触发分页 */
}

3. 改用img标签直接嵌入SVG（备选方案） #

如果object标签的布局仍有问题，可以直接用img标签引入SVG，减少嵌套层级，降低渲染器的布局计算复杂度：

<aside class="illustration">
  <img src="leaf.svg" alt="an illustration of a fallen leaf" />
</aside>

对应的CSS保持容器的居中与分页约束即可。

4. 调整容器的布局特性（极端情况） #

如果以上方法都无效，可尝试将容器改为行内块元素，避免渲染器将其视为独立的块级分页单元：

.illustration {
  display: inline-block;
  width: 40%;
  margin: 0 auto;
  page-break-inside: avoid;
}

原理说明 #

margin: 0 auto触发的空白页，通常是因为EPUB阅读器在小屏幕上计算块级元素的可用空间时，误判容器需要占据整页，或者后续内容被强制推到下一页。通过明确元素尺寸、约束高度、简化嵌套结构，能让渲染器更准确地处理分页逻辑。

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