svg 使用 html2canvas 时元素显示不正确

Question

So i'm trying to take a screenshot of a div containing an svg element, and add this screenshot in another div.所以我想截取包含 svg 元素的 div 的屏幕截图，并将此屏幕截图添加到另一个 div 中。 The screenshot is taken properly but the svg image isn't showing well:屏幕截图已正确截取，但 svg 图像显示不佳：

This is the div to be captured: Div to be captured这是要捕获的div：要捕获的div

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!谢谢你的帮助！

Answer 1

First make sure to load the latest version of html2Canvas, older versions don't seem to support svgs.首先确保加载最新版本的 html2Canvas，旧版本似乎不支持 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:接下来删除#corps svg 的绝对定位，并在#boite div 上使用 flex 使其居中：

#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:您可能需要调整 canvas 的高度以确保图像不被拉伸：

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";
  });

} }

svg 使用 html2canvas 时元素显示不正确

问题描述

1 个解决方案

解决方案1
0 已采纳 2023-01-02 00:52:24

svg 使用 html2canvas 时元素显示不正确

问题描述

1 个解决方案

解决方案1 0 已采纳 2023-01-02 00:52:24

解决方案1
0 已采纳 2023-01-02 00:52:24