html2canvas ignores my svg elements

问题

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 ?

回答1:

html2canvas support SVG rendering since0.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) {})

来源：https://stackoverflow.com/questions/40969900/html2canvas-ignores-my-svg-elements