防止浏览器在分页符附近移动SVG元素

Question

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

例：

1. 柱塞
2. 弹出预览
3. 打印（只看预览，实际上不必打印）

结果：每页2整盒，页边距不均匀

预期：每页2.5盒，边缘均匀

任何帮助将不胜感激

编辑：这是我正在谈论的画廊。显然，此问题不会影响所有浏览器/操作系统吗？

Answer 1

这是不可能的。

根据http://www.w3.org/TR/CSS2/page.html#allowed-page-breaks，以下是元素可以在页面之间中断的唯一情况：

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

1. 在块级框之间的垂直边距中。当此处发生强制分页符时，相关的'margin-top'和'margin-bottom'属性的使用值将设置为'0'。当此处发生强制分页符时，相关的'margin-bottom'属性的使用值设置为'0'；相关的“ margin-top”使用值可以设置为“ 0”或保留。
2. 在块容器框内的线框之间。
3. 如果块容器框的内容边缘与其子内容的外边缘（块级子级的边距边缘或内联级子级的行框边缘）之间存在间隙（非零），则在它们之间。

您想要（2），而您得到（1）。

问题是<svg>元素被替换为内容。

并且根据http://www.w3.org/TR/CSS2/visuren.html#block-boxes，替换的元素不会阻止容器框：

除了在下一章中介绍的表框和替换的元素外，块级框也是块容器框。

这意味着<svg>不满足（2），所以您无法获得想要的东西。