Div.ui-svg still contains the fill:inherit !important tag

General
1

I updated to the 3.1 of the ui-svg version and have checked svg_graphics.html and svg_graphics.js in ~/.node-red/node_modules/node-red-contrib-ui-svg, and the code doesn't contain the !important tag

div.ui-svg path {
    fill: inherit;
}

However, on loading a svg file I notice that my style="fill:red;" etc. tags are still overwritten by the default background. Inspecting the element shows me that the !important tag is still there

.svggraphics_af4851e6edb54d7a div.ui-svg path {
    fill: inherit !important;
}

Removing the !important tag gives me the colours that I want in the SVGs. Is there a way I can get rid of this please and why is this still showing?

Thanks.

2

Just figured it out. Svg nodes retain their css tags from their time of creation, and so the new version doesn't overwrite this. The easiest way to change this seems to be to identify where all the tags are:
find . -type f -exec grep "div.ui-svg" '{}' \; -print
And then modifying all of them with a batch command. For me this was in a flows.json file. Solved the issue.

3

Hi @letshin,
Thanks for sharing your solution!
Indeed the SVG node has set the css property once, but doesn't overwrite it afterwards (because the user might have changed it). And yes indeed the faulty css string keeps being used...
Bart

1 Like
4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.