Prevent browsers moving SVG elements around page breaks

Question

I'm making a dashboard using SVG-based charts. When I print the page, the charts move around to prevent page breaks from happening within them. This is undesirable and breaks my layout but I cannot figure out what is causing it.

Example:

1. Plunker
2. Pop out preview
3. Print (just look at preview, don't actually have to print)

Result: 2 full boxes per page with uneven margins

Expected: 2.5ish boxes per page with even margins

Any help would be greatly appreciated

EDIT: Here is a gallery of what I'm talking about. Apparently this issue does not affect all browsers/Operating systems?

Answer 1

It's not possible.

According to http://www.w3.org/TR/CSS2/page.html#allowed-page-breaks, these are the only cases in which an element can break between pages:

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.

You want (2), and you are getting (1).

The problem is that <svg> elements are replaced content.

And according to http://www.w3.org/TR/CSS2/visuren.html#block-boxes, replaced elements aren't block container boxes:

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

That means that <svg> doesn't fulfill (2), so you can't get what you want.

Answer 2

I worked it around by applying position: absolute to parent container.