danfickle/openhtmltopdf

Problem with SVG and CSS at-rule @page

danielblazquez opened this issue · 1 comments

danielblazquez commented

If you mix the at-rule @page with SVG code, it makes the PDF illegible

<!DOCTYPE html>
<head>
    <style>
        @page toc {
            margin: 1.3cm 2.5cm;
        }
        .toc {
            page: toc;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="toc">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 34.24" width="50" height="50"><polygon points="18 0 23.56 11.27 36 13.08 27 21.85 29.13 34.24 18 28.39 6.88 34.24 9 21.85 0 13.08 12.44 11.27 18 0" fill="#f4bd5e"/></svg>
    </div>
</body>
</html>
danfickle commented

Hi @danielblazquez,

Thanks for the concise example.

I think it is having a problem when the SVG element is the only content of the wrapping div. I'm working on a fix, but in the meantime, you could try adding an empty inline to the wrapper element.

You might also have a problem with empty pages being inserted because of the named page, which I'm also working on. See #233.

<!DOCTYPE html>
<html>
<head>
    <style>
        @page toc {
            margin: 1.3cm 2.5cm;
        }
        .toc {
            page: toc;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="toc">
        <span></span> <!-- HERE -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 34.24" width="50" height="50"><polygon points="18 0 23.56 11.27 36 13.08 27 21.85 29.13 34.24 18 28.39 6.88 34.24 9 21.85 0 13.08 12.44 11.27 18 0" fill="#f4bd5e"/></svg>
    </div>
</body>
</html>
  • 👍1