问题
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>
回答1:
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>
来源：https://stackoverflow.com/questions/48201286/html2canvas-print-svg-with-position-absolute-value-fail