html2canvas忽略了我的svg元素 [英] html2canvas ignores my svg elements

问题描述

我尝试打印页面的屏幕，然后将其保存到base64，效果很好，但是看起来 svg 元素被忽略了，有些 css 样式无法正常工作，例如:before和:after，原始页面外观-

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 -

您可以看到右侧的圆圈被忽略，顶部菜单中的箭头以及选项卡上的相同:before和:after并添加了新的选项卡按钮(+).我的转换代码外观-

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 ?

推荐答案

如果CSS属性位于CSS页面中，则HTML2canvas会忽略您的svg元素.

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

我遇到以下问题:我有一个svg块，并且在一个线块内. html2canvas捕获div块，但不捕获我的行.每个样式都在CSS页面中用这两个元素的类名声明.

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.

解决方案是将CSS属性放在svg和line标签内，如下所示:

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>

这篇关于html2canvas忽略了我的svg元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！