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

Question

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

示例:

1. Plunker
2. 弹出预览
3. 打印(只看预览，实际上不必打印)

结果:每页 2 个完整框，边距不均匀

预期每页 2.5 个框，边距均匀

任何帮助将不胜感激

编辑:这是一个gallery of what I'm talking about .显然这个问题不会影响所有浏览器/操作系统？

Answer 1

这不可能。

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

In the normal flow, page breaks can occur at the following places:

1. In the vertical margin between block-level boxes. When an unforced page break occurs here, the used values of the relevant 'margin-top' and 'margin-bottom' properties are set to '0'. When a forced page break occurs here, the used value of the relevant 'margin-bottom' property is set to '0'; the relevant 'margin-top' used value may either be set to '0' or retained.
2. Between line boxes inside a block container box.
3. Between the content edge of a block container box and the outer edges of its child content (margin edges of block-level children or line box edges for inline-level children) if there is a (non-zero) gap between them.

您想要 (2)，而您得到的是 (1)。

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

并根据http://www.w3.org/TR/CSS2/visuren.html#block-boxes ，替换元素不是 block 容器框:

Except for table boxes, which are described in a later chapter, and replaced elements, a block-level box is also a block container box.

这意味着<svg>不满足(2)，所以你得不到你想要的。