CSS filter invert does not properly invert the canvas of the svg

0 votes
asked Mar 15, 2018 in Bug by boshka (3,060 points)
edited Mar 15, 2018 by boshka

If you apply the following style to any Plantuml exported SVG:


svg {

filter: invert(100%) !important;

-webkit-filter: invert(100%) !important;



you will notice that the canvas surface (the one the diagram's title is located on) will not be inverted (it is stayed white with white inverted title). Everything else in the SVG gets inverted correctly.

I played a bit with the svg and style and could not get this fixed.

Could you check if this is an issue of the exported svg or is there a workaround?

Here is what you see before and after the style applied:

commented Mar 16, 2018 by boshka (3,060 points)
I found a strange workaround: if you set svg style additionally to: background:#FEFEFE;
(that is, to something not exactly white), then it does gets inverted ok

this can be done using skinparam backgroundColor too

1 Answer

0 votes
answered Mar 15, 2018 by plantuml (244,920 points)

Sorry, we are not SVG export here :-(

Maybe you should try with a very simple diagram:

actor foo

and post the generated SVG to some SVG forum to that someone find an issue.

We could then implement back the solution in PlantUML.

commented Mar 16, 2018 by boshka (3,060 points)
thanks. I explained a possible workaround above