html2canvas 和内联 SVG

Question

Im trying to use html2canvas to create a PNG-image from whats displayed inside a div. The div contains:

• Some more divs with text content (is captured OK by html2canvas)
• An inline SVG element like this: <svg version="1.1" id="img-15" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 645 585" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve" class="svg replaced-svg"><path [...]/></svg> <svg version="1.1" id="img-15" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 645 585" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve" class="svg replaced-svg"><path [...]/></svg>

This might look like this before using html2canvas:

And then Im using the following code to generate the PNG-image: html2canvas(document.querySelector("#monogram-zone"),{width:pWidth,height:pHeight,x:pLeft,y:pTop,backgroundColor:null}).then(canvas => { document.getElementById("monogram").appendChild(canvas); });

... and the results is the following:

Question: Where did my SVG go, and how can I get html2canvas to capture it together with the text divs?

Answer 1

A bit late… For anyone stumbling over this issue, it may be that you have transformations on the svg tag.

For some reason html2canvas reapplies transformations to elements that have already been transformed.

Here is a JSFiddle illustrating the issue: https://jsfiddle.net/vqnpx582/

Use the JSFiddle as the code below does not function!

 window.takeScreenshot = () => { html2canvas(document.querySelector("#monogram-zone")).then(canvas => { document.getElementById("monogram").appendChild(canvas); }); }

 div div { font-size: 3rem; font-family: sans-serif; } #textOgray { color: #555; position: fixed; left: 20px; top: 30px; } #textamp { position: fixed; left: 50px; top: 37px; } #textO { position: fixed; left: 80px; top: 30px; } #monogram-zone { width: 160px; height: 90px; overflow: hidden; background-color: cyan; position: relative; }

 <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script> <div id='monogram-zone'> <svg version="1.1" id="img-15" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="-10 -10 100 50" xml:space="preserve" style="transform: translate3d(10px, 20px, 30px);" class="svg replaced-svg"> <path fill="red" stroke-width="10" stroke="red" d="M0 0 h300 100"/> </svg> <div id='textOgray'>O</div> <div id='textamp'>&amp;</div> <div id='textO'>O</div> </div> <button onclick="takeScreenshot()">to image</button> <div id="monogram" />

as you can see in the fiddle, when running the html2canvas, the red bar is transformed a second time, moving to a different location.

This can cause some elements to disappear out of the captured div.