防止浏览器在分页符周围移动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，这些是元素在页面间断开的唯一情况：

  

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

     

  
1. 在块级框之间的垂直边距中。当此处发生非强制分页符时，相关的＆＃39; margin-top＆＃39;   和＆＃39; margin-bottom＆＃39;属性设置为＆＃39; 0＆＃39;。当一个强制页面   在这里发生中断，相关的＆＃39;保证金 - 底部＆＃39;   属性设置为＆＃39; 0＆＃39 ;;相关的＆＃39; margin-top＆＃39;使用价值可能   要么被设置为＆＃39; 0＆＃39; 0或保留。
  
2. 在块容器盒内的行框之间。
  
3. 在块容器框的内容边缘与其子内容的外边缘之间（块级子项或边框的边缘）   如果存在（非零）间隙，则为内联级子级的行框边   他们之间。
  

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

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

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

  

除了在后面的章节中描述的表格盒子，和   替换元素，块级框也是块容器框。

这意味着<svg>无法实现（2），因此您无法获得所需内容。

Answer 2

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