html2canvas忽略了我的svg元素

Question

我尝试打印我的页面屏幕，然后将其保存到base64，它运行良好，但看起来 svg 元素被忽略了，某些 css 样式效果不佳，例如:before和:after，原始页面外观 -

但转换后看起来像这样 -

您可以看到右侧的圈是忽略的，顶部菜单中的箭头和选项卡上的:before和:after相同，并添加新的标签按钮（+）。我的转换代码看起来 -

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= '';

    }

任何可能导致此问题的提示？

Answer 1

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

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

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

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

Answer 2

html2canvas自0.5.0-alpha1以来就支持 SVG渲染

1. 更新
2. 添加 allowTaint 属性。

像打击：

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