Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Problem with SVG and CSS at-rule @page #328

Closed
danielblazquez opened this issue Feb 21, 2019 · 1 comment
Closed

Problem with SVG and CSS at-rule @page #328

danielblazquez opened this issue Feb 21, 2019 · 1 comment
Labels
has passing test

Comments

@danielblazquez
Copy link

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
Copy link
Owner

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>

danfickle added a commit that referenced this issue Mar 2, 2019
@danfickle
#328 Regression test. Tests SVG in a wrapper element with named page.
2cb7216
This was referenced Mar 10, 2019
Open
Closed
danfickle added a commit that referenced this issue Mar 17, 2019
@danfickle
#336 - A better fix for #328 that allows broken replaced elements.
fb2b800 
Such as images.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
has passing test
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@danfickle @danielblazquez