html2canvas
html2canvas copied to clipboard
Published
20 hours ago •
niklasvh
niklasvh
bug: no font color for <foreignObject> within <svg>
- [X] You are using the latest version
- [X] You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console
Specifications:
- html2canvas version tested with: v1.4 (latest)
- Browser & version: chrome canary Version 99.0.4805.0
- Operating system: MacOSX
Bug reports:
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:
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);
});
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
