Html 防止浏览器在分页符周围移动SVG元素

我正在使用基于SVG的图表制作仪表板。当我打印页面时，图表会四处移动，以防止其中发生分页符。这是不可取的，打破了我的布局，但我无法找出是什么原因造成的

例如：

弹出预览 打印只需查看预览，实际上不必打印 结果：每页2个完整的方框，边距不均

预期：每页2.5个小方框，页边空白均匀

任何帮助都将不胜感激

编辑：这是一个例子。显然，这个问题不会影响所有浏览器/操作系统

这是不可能的

根据，以下是元素可以在页面之间断开的唯一情况：

在正常流程中，分页符可能出现在以下位置：

在块级别框之间的垂直边距中。当此处发生非强制分页符时，相关“页边距顶部”的使用值 “页边距底部”属性设置为“0”。当强制页面 此处出现中断，相关“保证金底部”的使用值 属性设置为“0”；相关的“保证金上限”使用值可能 可以设置为“0”或保留。 在块容器框内的行框之间。 块容器框的内容边缘与其子内容边框的外边缘之间块级子内容边框的边缘或 如果存在非零间隙，则内联级别子级的线框边缘 在他们之间。 你想要2个，你得到1个

问题是元素被内容替换了

根据，替换的元素不是块式容器盒：

表框除外（将在后面的章节中介绍），以及 替换图元后，块级别框也是块容器框

---

这意味着这不能满足2的要求，所以你不能得到你想要的。

我通过将position:absolute应用到父容器来解决这个问题。

我每页得到3个框，它们非常适合。这就是我看到的：使用而不是使用它。我已经检查了getComputedStyle，没有任何区别，因此它似乎无法用CSS修复。@Oriol我认为这些问题特别需要SVG标记？是的，Plunker是一种删除变量的简化方法。使用人力车的基于SVG的图表中的实际用例。。。谢谢你的详细回答。明天系统一允许我，我就给悬赏。在这种情况下，将svg转换为img将有助于。。。这可能需要使用服务器端php和其他东西。@ImranBughio但图像也被替换为内容：请参阅@anstosa而不是I all，我希望我能提供更多帮助。谢谢你的赏金！