The latest 2.3.0 version of the node-red-contrib-ui-svg node contains a major issue. But it is CSS related, and that is my weakest point. So cannot get it solved on my own. Would appreciate a lot if somebody could help me with this one!!!
Will try to summarize:
Long time ago there was an issue that the SVG path elements inherited the dashboard colors. So when you applied your own color to an SVG path, the path was colored in the dashboard colors anyway. Fortunately @dceejay and @Steve-Mcl have been so kind - at the time being - to figure out a solution for me
Since that solution worked great, that CSS snippet was hardcoded added to the generated html:
And that solution has been working great for a long time meanwhile!!
For the latest release I got a feature request to make the CSS customizable. So I added an extra tabsheet, and I moved the hardcoded CSS to that tabsheet (see this commit):
So until here the end result is exact the same.
However when you add some custom CSS in this tabsheet (e.g. to have blue circles), you only want to apply that CSS to this SVG drawing only. And if you have several SVG nodes, each SVG needs to have its own dedicated CSS. Since scoped CSS has been removed from the SVG specification, I had to find a workaround: at the end, I have used the postcss-prefix-selector library to add automatically a prefix ( "#svggraphics_" + config.id ) to all the entered CSS selectors (in the CSS tabsheet). This way I could simulate scoped CSS, by applying the selectors (from the CSS tabsheet) only to the parent DIV element. Which seemed to work fine.
However now it seems that the SVG path elements again inherit their color from the dashboard . And when the users remove the !important from the CSS tabsheet, then everything is fine again!
So I don't get why removing !important from the tabsheet solves the problem. I could remove it from my code, but I am not sure whether I am going to break then other drawings. Because to be honest, I don't know why we have added it at the time being ...
Would be very nice if somebody could "try" to give me some ideas of what I should do with this. Don't know the theory good enough to decide whether it is safe for me to remove the !important from the CSS tabsheet by default or not...
You must to avoid using the !important flag. (there is of course edge cases and exceptions)
It should be left free to use as final resort for end-users.
As dashboard declares styles for svg path in the manner it does, you have no more choices than play with styles which get higher specificity. Note that using fill property of the path element will not work any way cos styles override it in all cases.
Inherit for fill should make it to use default value which is black.
Very simple example to see which way the rules apply.
[{"id":"009e8711665bcd0b","type":"ui_template","z":"6d08d5ab.a8aa3c","group":"6ff3bb48.c2b764","name":"","order":4,"width":0,"height":0,"format":"<style>\n/*this will get lower specificity than dashboard rule*/\n.svg-class path{\n fill: orange;\n}\n/*this will get higher specificity than dashboard rule*/\n.nr-dashboard-theme .nr-dashboard-template .svg-class path{\n fill: red;\n}\n</style>\n\n<svg class=\"svg-class\" height=\"210\" width=\"400\">\n <path d=\"M150 0 L75 200 L225 200 Z\" fill=\"purple\"/> \n <path d=\"M100 0 L95 200 L225 100 Z\" fill=\"purple\" style=\"fill:yellow\" />\n</svg>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":390,"y":1680,"wires":[[]]},{"id":"6ff3bb48.c2b764","type":"ui_group","name":"Storage","tab":"c209d57.e95de28","order":1,"disp":true,"width":"18","collapse":false},{"id":"c209d57.e95de28","type":"ui_tab","name":"Recordings","icon":"dashboard","order":2,"disabled":false,"hidden":false}]
Mister @hotNipi,
You have no clue how much I appreciate your css for dummies explanation...
Thanks !!! Very illuminating!!
Now my shrinken brain needs to digest it slowly...
After reading your feedback, there are a couple of things that I don't understand now:
You apply a fill style color yellow, which seems to be more specific than all other styles, so the path becomes yellow. However in our original issue at the time being, our fill color style on the path element was overridden by the dashboard . So that is another behaviour as in your example...
Does that make sense to you?
Steve and Dave solved it (at the time being) by following workaround:
added class ui-svg to the parent div of the svg
added a local <style> element to override some style settings:
So if I understand correctly: when no fill style color is applied to the path by the user then the fill color value will be inherited from the div style. And the div style will in turn use the currentColor (I assume that is something from the dashboard) as color. Is that a bit correct? And that solves the problem from step 1 since this rule is more specific, compared to the dashboard rule (since we target specifically only on the div.ui-svg class), so this rule wins? Correct?
The solution from step 2 has worked for a long time. To have scoped css , I applied that postcss-prefix-selector to all the rules in the CSS tabsheet. So the default content:
That way the styles are only applied to this SVG drawing only. Which works fine, as you can see in this simple example.
But it seems that my prefixes have corrupted the solution from Steve and Dave somehow. However I don't understand why, because my prefixes make the style much more selective compared to the dashboard styles? But seems not
And when the users remove the important! keywords, then suddenly everything works again...
My wife always tells me I need to search a more relaxing hobby...
I am getting an idea of what she means
Really appreciate your help!! And (most...) SVG node users also!!
I had another user reporting a similar issue. I have asked to do some extra testing, and he confirmed that it was all solved by removing the second !important:
So I assume it can do no harm to publish a fix with this change...
. And when the users remove the 
. So that is another behaviour as in your example...
