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.

Sign up for GitHub

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

Jump to bottom

External css file for SVG styles- best practices? #493

Closed
rhinowalrus opened this issue May 27, 2020 · 6 comments
Closed

External css file for SVG styles- best practices? #493

rhinowalrus opened this issue May 27, 2020 · 6 comments

Comments

@rhinowalrus
Copy link

Is there support for applying styles from an external css file to inline svg's? I've done some tinkering around adding processing instructions to the svg and transcoding hints without much luck.
@rhinowalrus rhinowalrus changed the title External css file for SVG styles External css file for SVG styles- best practices? May 27, 2020
@syjer
Copy link
Contributor

syjer commented May 28, 2020

hi @rhinowalrus , as far as I know, the css does not apply to inline svg.

Maybe at rendering time we could modify the dom of the inlined svg and apply the correct styles in the code.

Could you provide an example so maybe I can try to implement it? :)

@rhinowalrus
Copy link
Author

@syjer, sure thing! Here's an example from one of our charts.

external.css:


.allocation-wrapper svg{
    /* requires height, width */
    position:relative;
    height:325px;
    width:200px;
}

.circle-legend .slice1{
    stroke:#86BC40;
    fill:#86BC40;
}

.circle-legend .slice2{
    stroke:#60923F;
    fill:#60923F;
}

.circle-legend .slice3{
    stroke:#A84D9D;
    fill:#A84D9D;
}


.donut-chart circle{
    stroke-width:100;
    fill:none;
}

.donut-chart .slice1{
    stroke:#86BC40;
}

.donut-chart .slice2{
    stroke:#60923F;
}

.donut-chart .slice3{
    stroke:#A84D9D;
}

Markup:

<div class="svg-wrapper allocation-wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="geometricPrecision" style="display:block;" stroke-linecap="butt" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" viewBox="0 200 550 450" font-style="normal" stroke-linejoin="miter" font-size="12px" stroke-dashoffset="0" image-rendering="auto"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g/><g class="donut-chart asset-allocation-pie"><circle stroke-dashoffset="1250px" fill="none" r="159" stroke-dasharray="340px 660px" class="slice1" cx="210" cy="210"/><circle stroke-dashoffset="910px" fill="none" r="159" stroke-dasharray="330px 670px" class="slice2" cx="210" cy="210"/><circle stroke-dashoffset="580px" fill="none" r="159" stroke-dasharray="330px 670px" class="slice3" cx="210" cy="210"/></g><g class="circle-legend circle-legend-auto"><circle r="20" class="slice1" cx="20" cy="470" stroke="none"/><text font-size="28" x="50" y="477">US Bonds</text><text font-size="28" x="350" y="477">34%</text><circle r="20" class="slice2" cx="20" cy="517" stroke="none"/><text font-size="28" x="50" y="524">Canada Universe Bond</text><text font-size="28" x="350" y="524">33%</text><circle r="20" class="slice3" cx="20" cy="564" stroke="none"/><text font-size="28" x="50" y="571">Cash</text><text font-size="28" x="350" y="571">33%</text></g></svg>
</div>

In our setup using iText and Flying Saucer we would replace the svg elements with pngs, and in the process add the following transcoder hint that pulled in the external css.

transcoder.addTranscodingHint(PNGTranscoder.KEY_USER_STYLESHEET_URI , "classpath://SOMEPATH/external.css");

The inline svg support in openhtmltopdf is awesome. Hoping we can find a good way to utilize it with our external svg css

@syjer
Copy link
Contributor

syjer commented May 28, 2020

hi @rhinowalrus thank you for the example and clarifications :).

I'll have a look this week end.

@rhinowalrus
Copy link
Author

@syjer, thank you for your assistance. My colleague has a solution for us. He plans on opening a PR with the fix. I'll link it here when it is up and close the issue.

@amckain92 amckain92 mentioned this issue May 30, 2020
Closed
@amckain92
Copy link

@syjer @rhinowalrus
Added PR for issue: #496
Thanks!

danfickle added a commit that referenced this issue Jul 17, 2020
@danfickle
#493 Failing test for CSS not passed to SVG renderer.
3b28992
danfickle added a commit that referenced this issue Jul 17, 2020
@danfickle
#493 Clean up mapper while understanding how it works.
3bd9343 
Need to write a new mapper to retrieve styles for SVGs.
danfickle added a commit that referenced this issue Jul 17, 2020
@danfickle
#493 Semi working proof of concept on extracting SVG CSS styles.
f1284f4 
Still needs work on passing through CSS properties tht are not valid in HTML but valid in SVG such as the fill property.
@danfickle danfickle mentioned this issue Jul 17, 2020
Merged
danfickle added a commit that referenced this issue Jul 19, 2020
@danfickle
#493 Keep invalid property declarations in the CSS parser
4a2cf8e 
So they can be passed to SVG plugin. Test is now working well, but proof will be provided in a separate commit.
danfickle added a commit that referenced this issue Jul 19, 2020
@danfickle
#493 Suppress warnings about SVG properties not being implemented.
62ada2e
danfickle added a commit that referenced this issue Jul 19, 2020
@danfickle
#493 Test proof that auto extraction of SVG styles is working.
f038dd0
danfickle added a commit that referenced this issue Jul 21, 2020
@danfickle
#493 Test applying styles to external SVG linked via img tag.
33ad1b5 
Copy the class attribute from img tag to svg tag so it can be better targetted.
danfickle added a commit that referenced this issue Jul 21, 2020
@danfickle
Merge pull request #515 from danfickle/svg_styles
9343409 
#493 Auto extraction of SVG styles to pass to Batik SVG renderer.
@danfickle
Copy link
Owner

Assumed solved with #515, please reopen as required. Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Adding ability to specify 'UserStyleSheetURI' for an SVGDrawer, this … amckain92/openhtmltopdf
4 participants
@syjer @danfickle @rhinowalrus @amckain92