带有位置绝对值的html2canvas打印svg失败 [英] html2canvas print svg with position absolute value fail
本文介绍了带有位置绝对值的html2canvas打印svg失败的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
请运行下面的代码，您将看到:红线未打印到画布.位置绝对值有什么问题?我该如何解决?谢谢.
Please run the code below, you can see: The red line is not print to canvas. What's wrong with position absolute value? How can I fix it? Thanks.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="Screenshot" style="height:200px; width:300px;">
<p>This is it</p>
<svg width="138" height="14" version="1.1" xmlns="http://www.w3.org/2000/svg" >
<path d="M 5 0 C 71 10 71 10 137 0 " transform="translate(0,3.4488784721473897)" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#89bcde" style="" stroke-width="1"></path>
<path version="1.1" xmlns="http://www.w3.org/2000/svg" d="M5,0 L15.63509460627212,-3.4488784721473897 L11.159991667025153,0.9313445453647529 L14.140159541481182,6.438748601729261 L5,0" stroke="#89bcde" fill="#89bcde" transform="translate(0,3.4488784721473897)"></path>
</svg>
<svg width="138" height="14" style="position:absolute;left:10px;top:100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M 5 0 C 71 10 71 10 137 0 " transform="translate(0,3.4488784721473897)" pointer-events="visibleStroke" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="red" style="" stroke-width="1"></path>
<path version="1.1" xmlns="http://www.w3.org/2000/svg" d="M5,0 L15.63509460627212,-3.4488784721473897 L11.159991667025153,0.9313445453647529 L14.140159541481182,6.438748601729261 L5,0" stroke="red" fill="#89bcde" transform="translate(0,3.4488784721473897)"></path>
</svg>
</div>
<hr />
<input type="button" value="test" onclick="TestCV()" />
<div id="test">
</div>
<!--<script src="../src/html2canvas.js"></script>-->
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script type="text/javascript">
function TestCV() {
html2canvas(document.getElementById("Screenshot")).then(function (canvas) {
document.getElementById("test").appendChild(canvas);
});
}
</script>
</body>
</html>
推荐答案
尝试在svg之前附加和扩展:
Try append and span before svg like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="Screenshot" style="height:200px; width:300px;">
<p>This is it</p>
<svg style="display:block" width="138" height="14" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M 5 0 C 71 10 71 10 137 0 " transform="translate(0,3.4488784721473897)" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#89bcde" style="" stroke-width="1"></path>
<path version="1.1" xmlns="http://www.w3.org/2000/svg" d="M5,0 L15.63509460627212,-3.4488784721473897 L11.159991667025153,0.9313445453647529 L14.140159541481182,6.438748601729261 L5,0" stroke="#89bcde" fill="#89bcde" transform="translate(0,3.4488784721473897)"></path>
</svg>
<svg style="position:absolute;left:10px;top:100px" width="1389" height="14" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M 5 0 C 71 10 71 10 137 0 " transform="translate(0,3.4488784721473897)" pointer-events="visibleStroke" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="red" style="" stroke-width="1"></path>
<path version="1.1" xmlns="http://www.w3.org/2000/svg" d="M5,0 L15.63509460627212,-3.4488784721473897 L11.159991667025153,0.9313445453647529 L14.140159541481182,6.438748601729261 L5,0" stroke="red" fill="#89bcde" transform="translate(0,3.4488784721473897)"></path>
</svg>
</div>
<hr />
<input type="button" value="test" onclick="TestCV()" />
<div id="test">
</div>
<div id="temporady" >
</div>
<!--<script src="../src/html2canvas.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script type="text/javascript">
//==============================================
function TestCV() {
AddCss();
var x = $("#Screenshot")[0];
html2canvas(x).then(function (canvas) {
document.getElementById("test").appendChild(canvas);
});
setTimeout(function () {
RemoveCss();
}, 200);
}
function AddCss() {
var css;
$("#Screenshot").find("svg").each(function () {
var style = $(this).attr("style");
$(this).wrap("<spand style='"+style+"'></spand>");
$(this).removeAttr("style");
});
}
function RemoveCss() {
$("#Screenshot").find("svg").each(function () {
css = $(this).parent().attr("style");
$(this).attr('style', css);
$(this).unwrap();
});
}
</script>
</body>
</html>
这篇关于带有位置绝对值的html2canvas打印svg失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
