Non-transparent colors defined in external stylesheets make SVG elements disappear in PDF
DarSim2 opened this issue · 2 comments
I have a svg containing some rects where the fill colors are defined in an external stylesheet, like so:
html:
<rect width="50" height="50" x="10" y="10" class="custom-rect"></rect>
css:
.custom-rect {
fill: rgb(192, 93, 93);
}
When converting to a PDF I'm adding said stylesheet to the svg and setting the loadExternalStylesheet flag.
Now to the problem:
When the fill colors defined in my stylesheet have 100% opacity then the rects I see on my display are not shown in the PDF. They don't exist there.
If I add a little transparency to the colors (like 99% opacity) then the rects are shown in the PDF correctly:
css:
.custom-rect {
fill: rgb(192, 93, 93);
opacity: 0.99;
}
I'm using svg2pdf 2.2.0 and jspdf 2.5.1.
I would expect that fill colors from external stylesheets should be displayed normally regardless of the opacity of the colors.
I wasn't able to reproduce this. Please provide a complete project that reproduces the issue.
Ok I found the issue, it was caused by me (wrongly) giving fill: transparent;
to the group containing the rect.
<g class="t">
<rect width="50" height="50" x="10" y="10" class="custom-rect"></rect>
</g>
.t {
fill: transparent;
}
.custom-rect {
fill: rgb(192, 93, 93);
}
It didn't have any effect in the browser but when converting to pdf it made the rect disappear.