html2canvas ignores my svg elements

Question

I try to print screen of my page and then save it into base64, it works good but it looks like that svg elements are ignored, and some css styles work bad, like :before and :after, original page looks -

but after conversion it looks like this -

You can see the circle on right side is ignore, and arrow in top menu and same :before and :after on tabs and add new tab button (+). My convert code looks -

printOnePage(){
        document.getElementById('helpPage').style.display= 'none';
        let page = document.getElementById('appContainer');
        html2canvas(page,{
            onrendered: function(canvas) {
                $('#img_val').val(canvas.toDataURL("image/png"));
                console.log(document.getElementById('img_val'));
                //document.getElementById("phpSendForm").submit();
            }
        });
        document.getElementById('helpPage').style.display= '';

    }

Any tips what can cause this ?

See [this](http://stackoverflow.com/a/10722025/863110) answer. And here is the [solution](http://stackoverflow.com/a/3976034/863110) — Mosh Feu, Dec 05 '16 at 08:26
He added some html2canvas.svg.js, but i don't know how to work with it — Lukáš Unzeitig, Dec 05 '16 at 09:11
Then you'll need to show us your svg markup, [this Q/A](http://stackoverflow.com/q/33595847/3702797) may help — Kaiido, Dec 06 '16 at 01:03

score 2 · Answer 1 · answered Jun 17 '20 at 08:39

2

Html2canvas ignores your svg elements if the CSS properties are in the CSS page.

I had the following problem: I had an svg block and inside a line block. And html2canvas capture the div block but doesn't capture my line. The style of each has been declared in the CSS page with the class name of these two elements.

And the solution was just to put the CSS properties inside the svg and line tag, like this:

<div>
<svg width="100%" height="100%">
<line style="cursor: pointer; stroke: black; stroke-width: 2;" />
</svg>
</div>

answered Jun 17 '20 at 08:39

zerbene

1,249
2
7
21

what is a "CSS page"? can you please clarify by using broadly understood terminology, please? – TheDiveO Aug 06 '21 at 19:32
Yeah sure sorry. So the CSS page is for me the file .css (page=file). In many projects you have a file .html, .js and a file .css, that you import for instance in your html file. And with html2canvas I observe that if my properties were declared in the file .css, they were not captured by html2canvas. So I declare the CSS as "inline CSS" – zerbene Aug 07 '21 at 11:02

alan9uo · Answer 2 · 2018-06-28T03:03:41.790

-1

html2canvas support SVG rendering since0.5.0-alpha1 just

update
add the allowTaint property.

like blow:

html2canvas(copyDom[0], {
        useCORS: true,
        imageTimeout:0,
        allowTaint: true //you can add this property
    }).then(function (canvas) {})

edited Jun 28 '18 at 03:03

answered Jun 27 '18 at 06:32

alan9uo

1,011
1
11
17

html2canvas ignores my svg elements

2 Answers2