html2canvas 忽略我的 svg 元素

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 ?

Answer 1

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>

Answer 2

html2canvas support SVG rendering since 0.5.0-alpha1 just

1. update
2. add the allowTaint property.

like blow:

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