yWorks/svg2pdf.js

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.