search

niklasvh / html2canvas

Screenshots with JavaScript
https://html2canvas.hertzen.com/
MIT License
30.59k stars 4.81k forks source link

bug: no font color for <foreignObject> within <svg> #2799

Open terrencekuo opened 2 years ago

terrencekuo commented 2 years ago

Specifications:

Hi @niklasvh !

thanks for this library. it is well documented and has been extremely for useful for my project.

I noticed that when capturing screenshots for <foreignObject> within a <svg>, font colors are not captured.

what interesting is that table border color and table background color are captured - it seems to just be fonts.

would greatly appreciate it if you could help me understand why this is happening.

thanks!

Repro:

JSFIDDLE REPO LINK

HTML

<html>
  <body>
    <h1>The Original</h1>
    <div class="entry">
      <svg id="dagreStackHeapSvg" width="150" height="150">
        <style>
          table {
            color: green;
            border: 2px solid red;
            margin: 2px;
            padding: 4px;
          }
          foreignObject {
            background-color: white;
          }
        </style>
        <g id="dagreStackHeapG">
          <foreignObject width="140.6640625" height="93">
            <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">
              <table>
                <caption style="color: orange;">
                  global variable
                </caption>
                <tbody>
                  <tr>
                    <th>name</th>
                    <th>value</th>
                  </tr>
                  <tr>
                    <td class="variableNameClass">pyInt</td>
                    <td class="variableValueClass" id="MEMVIZ1_MEMVARTYPE_global_MEMVAR_quotpyInt_123quot">123</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </foreignObject>
        </g>
      </svg>
    </div>
    <h1>The Printed Canvas</h1>
  </body>
</html>

Javascript

html2canvas(document.body.querySelector(".entry"), {
    allowTaint: true,
}).then((result) => {
    document.body.appendChild(result);
});
terrencekuo commented 2 years ago

Hi @niklasvh !

wanted to bump this. please let me know if there is anything I can do to make progress on this. if you could point me where to look into the repo, i can put up a pull request

thanks

Alice-hhu commented 2 years ago

Hi, I have a similar problem. Have you solved the problem yet?