html2canvas忽略我的svg元素
html2canvas忽略我的svg元素
提问于 2016-12-05 08:22:03
我尝试打印页面的屏幕，然后将其保存到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= '';
}有什么提示会导致这种情况吗？
回答 2
Stack Overflow用户
发布于 2020-06-17 08:39:16
如果CSS属性位于CSS页面中，Html2canvas将忽略svg元素。
我有以下问题:我有一个svg块和一个行块。html2canvas捕获div块，但不捕获我的行。每个元素的样式都已在CSS页面中声明，其类名为这两个元素的类名。
解决方案就是将CSS属性放在svg和行标记中，如下所示：
<div>
<svg width="100%" height="100%">
<line style="cursor: pointer; stroke: black; stroke-width: 2;" />
</svg>
</div>Stack Overflow用户
发布于 2018-06-27 06:32:35
html2canvas支持SVG呈现，因为0.5.0-alpha1只是
- 更新
- 添加allowTaint属性。
就像一击：
html2canvas(copyDom[0], {
useCORS: true,
imageTimeout:0,
allowTaint: true //you can add this property
}).then(function (canvas) {})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40969900
复制相关文章
相似问题
腾讯云开发者
