yWorks/svg2pdf.js

Support for Css variables

FHoffmannSopra opened this issue · 3 comments

Hey guys,

I tried to render a ccs-styled polyline with the svg2pdf tool.
I know styles have to be declared inside the Svg to work correctly in the PDF document.
For the colors of my polyline I use Css variables stored in :root, which I would like to embed in the Svg too.
I tried these three approaches:

Added this style tag and the variable declaration right into my class (all manipulations not based on variables work fine)
<style>.bluePolyline {--color: blue; stroke: var(--color); }</style>
<path class="bluePolyline"><path/>

Added an additional class to my polyline, which includes all my colors
<style>.bluePolyline {stroke: var(--color); }</style>
<style>.polyLineColors {--color: blue;}</style>
<path class="bluePolyline polyLineColors"><path/>

Added the variable declaration to the outermost Svg container:
<svg style="--color: blue;"><svg/>
<style>.bluePolyline {stroke: var(--color); }</style>
<path class="bluePolyline"><path/>

As far as I know all these methods work in html and I get the right colors in the DOM.
However in the exported Pdf none of the strokes are rendered.
Just need the info if there is another way to embed the variables, or just no support for it.

I am running jsPdf 2.4.0 and svg2pdf 2.2.0, not sure which package is responisble for such a feature.

Thanks for your help
Frederic

Sorry, I accidently hit the sent button too early

Here Is a playground example
Should help to comprehend my issue

CSS Variables are not supported ATM.

In https://github.com/yWorks/svg2pdf.js/blob/master/src/context/stylesheets.ts#L187, getPropertyValue just returns something like 'var(--color)'. The variable would have to be resolved manually, which is currently not done.

A pull request would be very welcome ;)