svg element not displayed properly when using html2canvas-CodePudding

So i'm trying to take a screenshot of a div containing an svg element, and add this screenshot in another div. The screenshot is taken properly but the svg image isn't showing well:

This is the div to be captured: Div to be captured

And this is how it is showing: Result

This is my code (it is not working on the demo i'm not sure why but this is the code i used):

function fin() {

 html2canvas(document.querySelector("#boite")).then(canvas => {
    document.getElementById('img_fin').appendChild(canvas)
    canvas.style.width='180px'
    canvas.style.height="100px"
    canvas.style.position="absolute"
  });


}

#boite {
    width: 70%;
    height: 85%;
    border: 5px solid black;
    background-color: #e3e2d3;
    position: absolute;
    left: 0;
    right: 0;
    top: 5%;
    justify-content: center;
    align-items: center;
    margin-left: 285px;
}
#corps{
    position: relative;
    width: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

#img_fin{
    width: 180px;
    height: 100px;
    background-color: red;
    background-size: cover;
    background-repeat: no-repeat;
    margin-left: 50px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-alpha1/html2canvas.js"></script>
    <title>Document</title>
</head>
<body>
    
<div id="boite">
     <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 1876.000000 2501.000000"
    preserveAspectRatio="xMidYMid meet" id="corps"  width="80%" height="80%">
   
   <g transform="translate(0.000000,2501.000000) scale(0.100000,-0.100000)"
   fill="white" stroke="none" id="issasvg" >
   <path d="M8615 24873 c-386 -22 -661 -48 -938 -88 -960 -140 -1780 -418 -2486
   -844 -317 -192 -473 -310 -721 -546 -164 -157 -264 -231 -362 -267 -44 -16
   -62 -28 -69 -46 -13 -34 6 -80 36 -88 12 -3 99 17 198 45 97 28 179 51 183 51
   5 0 -50 -39 -121 -86 -602 -401 -1138 -934 -1593 -1586 -602 -861 -1038 -1873
   -1357 -3148 -106 -420 -113 -462 -145 -834 -70 -801 -109 -1055 -242 -1591
   -139 -561 -163 -730 -163 -1145 0 -197 4 -325 13 -385 23 -153 62 -325 99
   -435 39 -119 144 -344 175 -377 22 -24 62 -30 88 -13 8 5 49 112 91 237 l76
   228 8 -50 c59 -407 298 -971 616 -1453 87 -132 132 -179 182 -193 95 -25 146
   38 175 217 9 57 20 104 24 104 4 0 8 -5 8 -10 0 -6 25 -67 56 -137 146 -331
   327 -595 579 -848 226 -227 390 -356 697 -547 l178 -110 -46 -57 c-935 -1156
   -1523 -2549 -1683 -3986 -37 -329 -45 -485 -45 -865 0 -388 13 -603 55 -945
   106 -867 372 -1742 769 -2534 67 -134 80 -151 119 -151 53 0 61 23 61 166 0
   71 3 152 6 181 l7 52 76 -112 c339 -495 585 -798 841 -1035 538 -498 1161
   -855 1925 -1105 779 -254 1708 -374 2624 -338 331 13 498 26 896 71 149 16
   275 30 280 30 16 -1 -64 -41 -140 -71 -81 -31 -104 -59 -83 -103 6 -15 23 -30
   37 -34 42 -12 555 -7 696 7 575 55 1056 184 1816 487 773 307 1301 585 1764
   929 441 326 806 720 1058 1139 60 100 77 122 82 106 3 -11 8 -105 9 -208 2
   -104 6 -195 11 -201 12 -20 53 -31 79 -21 41 15 261 480 408 865 693 1807 684
   3785 -27 5580 -301 759 -688 1413 -1243 2096 l-23 28 101 76 c213 161 427 344
   750 641 369 338 548 553 690 825 l57 111 17 -109 c9 -59 22 -125 28 -145 25
   -85 119 -123 188 -76 95 64 374 521 518 848 116 261 219 591 238 761 4 33 10
   57 14 52 4 -4 40 -106 80 -226 61 -186 76 -220 96 -229 53 -25 73 -5 155 157
   316 626 333 1410 49 2340 -29 94 -70 229 -92 300 -37 122 -514 1993 -592 2320
   -57 240 -100 447 -170 813 -108 559 -164 803 -256 1107 -223 739 -541 1319
   -968 1766 -59 62 -102 110 -97 107 20 -11 461 -148 478 -148 25 0 57 36 57 66
   0 15 -12 37 -32 56 -53 49 -204 159 -328 238 -150 95 -268 183 -465 344 -631
   517 -1140 856 -1725 1150 -1004 506 -2012 758 -3295 826 -167 9 -976 11 -1110
   3z"/>
   </g>
   </svg>

</div>
<div id="img_fin">
</div>
<button onclick='fin()'>Click</button>
</body>
</html>

Thank you for you help!

CodePudding user response：

First make sure to load the latest version of html2Canvas, older versions don't seem to support svgs.

 <script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>

Next remove the absolute positioning of the #corps svg and use flex on the #boite div to center it instead:

#boite {
    width: 70%;
    height: 85%;
    border: 5px solid black;
    background-color: #e3e2d3;
    position: absolute;
    left: 0;
    right: 0;
    top: 5%;
    justify-content: center;
    align-items: center;
    margin-left: 285px;
    display: flex;  // add this
}
#corps{
    width: 300px; // only set width here
}

You may have to tweak the height of the canvas to ensure the image isn't stretched:

function fin() {
  html2canvas(document.querySelector("#boite")).then((canvas) => {
    document.getElementById("img_fin").appendChild(canvas);
    canvas.style.width = "180px"; // may need to tweak this
    canvas.style.height = "130px"; // and or this
    canvas.style.position = "absolute";
  });

}