Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for Css variables #206

Open
FHoffmannSopra opened this issue Apr 5, 2022 · 3 comments
Open

Support for Css variables #206

FHoffmannSopra opened this issue Apr 5, 2022 · 3 comments
Labels
difficulty:medium enhancement help wanted Help with creating a proper test-case, looking up the spec, or creating a pull request.

Comments

@FHoffmannSopra
Copy link

FHoffmannSopra commented Apr 5, 2022

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

@yGuy yGuy added the needs-info This issue is on hold, until more information becomes available. label Apr 5, 2022
@FHoffmannSopra
Copy link
Author

Sorry, I accidently hit the sent button too early

@FHoffmannSopra
Copy link
Author

Here Is a playground example
Should help to comprehend my issue

@yGuy yGuy removed the needs-info This issue is on hold, until more information becomes available. label Apr 5, 2022
@HackbrettXXX
Copy link
Member

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 ;)

@HackbrettXXX HackbrettXXX added enhancement help wanted Help with creating a proper test-case, looking up the spec, or creating a pull request. difficulty:medium and removed question labels Apr 6, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
difficulty:medium enhancement help wanted Help with creating a proper test-case, looking up the spec, or creating a pull request.
Projects
None yet
Development

No branches or pull requests

3 participants