Animation/Fill does not work

[dpatel2016]

I updated the module to 2.3.0 and now none of the animation or the colors work properly. Is this a bug because everything was working perfectly fine before updating to 2.3.0.

[bartbutenaers]

or the colors work properly

@dpatel2016 Can you give me simple example flow and some info, that allows me to reproduce the issue easily? Bart

[dpatel2016]

[{"id":"cbe465669b42f30f","type":"ui_svg_graphics","z":"bfcb747d.3c5b28","group":"83c2bdcc.1173a","order":1,"width":5,"height":5,"svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" id=\"Capa_1\" enable-background=\"new 0 0 200 200\" height=\"260\" viewBox=\"0 -7 160 160\" width=\"260\" preserveAspectRatio=\"xMidYMid meet\"><rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"250\" height=\"250\" style=\"fill:none; stroke: none;\"/><g id=\"g_e1_svg\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"150\" height=\"150\" viewBox=\"0 0 512 512\" preserveAspectRatio=\"xMidYMid meet\" id=\"e1_svg\" x=\"0\" y=\"0\"><g id=\"XMLID_7_\"><g><path d=\"m286 321.99c24.29 18.25 40 47.29 40 80.01 0 55.23-44.77 100-100 100s-100-44.77-100-100c0-32.72 15.71-61.76 40-80.01v-251.99c0-33.09 26.91-60 60-60s60 26.91 60 60z\" fill=\"none\"/></g><g><g fill=\"#ff6684\"><path d=\"m296 317.137v-247.137c0-38.598-31.402-70-70-70s-70 31.402-70 70v247.137c-25.485 20.99-40 51.64-40 84.863 0 60.654 49.346 110 110 110s110-49.346 110-110c0-33.223-14.515-63.873-40-84.863zm-70 174.863c-49.626 0-90-40.374-90-90 0-28.574 13.124-54.823 36.007-72.015 2.514-1.889 3.993-4.85 3.993-7.995v-251.99c0-27.57 22.43-50 50-50s50 22.43 50 50v251.99c0 3.145 1.479 6.106 3.993 7.995 22.883 17.192 36.007 43.441 36.007 72.015 0 49.626-40.374 90-90 90z\" style=\"fill:#2F4F4F;\"/><path d=\"m326,60h60c5.522,0,10,-4.477,10,-10s-4.478,-10,-10,-10h-60c-5.522,0,-10,4.477,-10,10s4.478,10,10,10Z\" style=\"fill:#696969;\"/><path d=\"m326,120h40c5.522,0,10,-4.477,10,-10s-4.478,-10,-10,-10h-40c-5.522,0,-10,4.477,-10,10s4.478,10,10,10Z\" style=\"fill:rgb(105,105,105);\"/><path d=\"m326,240h40c5.522,0,10,-4.477,10,-10s-4.478,-10,-10,-10h-40c-5.522,0,-10,4.477,-10,10s4.478,10,10,10Z\" style=\"fill:#696969;\"/><path d=\"m386,280h-60c-5.522,0,-10,4.477,-10,10s4.478,10,10,10h60c5.522,0,10,-4.477,10,-10s-4.478,-10,-10,-10Z\" style=\"fill:#696969;\"/></g><circle cx=\"226\" cy=\"402\" fill=\"rgb(178,34,34)\" r=\"50\"/></g></g></svg></g><rect x=\"218.15\" y=\"170\" style=\"fill:firebrick;stroke:none;stroke-width:1px;\" id=\"meter\" width=\"7.000000\" height=\"100\" rx=\"3.5\" ry=\"3.5\" transform=\"matrix(-1 1.22465e-16 -1.22465e-16 -1 288 280)\"/><text style=\"fill:darkslategray;font-family:Century Gothic;font-size:18px;font-weight:bold;\" x=\"91.3808\" y=\"57.1442\" id=\"value\">...</text></svg>","clickableShapes":[],"javascriptHandlers":[],"smilAnimations":[],"bindings":[{"selector":"#meter","bindSource":"payload.water_height","bindType":"attr","attribute":"height"}],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"cssString":"div.ui-svg svg{\n    color: var(--nr-dashboard-widgetColor);\n    fill: currentColor !important;\n}\ndiv.ui-svg path {\n    fill: inherit !important;\n}","name":"","x":580,"y":580,"wires":[[]]},{"id":"c6696f1ac81de2b1","type":"function","z":"bfcb747d.3c5b28","name":"","func":"var i = msg.payload;\nmsg.payload =[\n    {\n        \"command\": \"update_text\",\n        \"selector\": \"#value\",\n        \"textContent\": (i+ \" F\")\n    },\n    {\n        \"command\": \"set_attribute\",\n        \"selector\": \"#meter\",\n        \"attributeName\": \"height\",\n        \"attributeValue\": ((i/2)+40)\n    }\n]\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":380,"y":600,"wires":[["cbe465669b42f30f"]]},{"id":"83c2bdcc.1173a","type":"ui_group","name":"Test","tab":"","order":1,"disp":true,"width":"6","collapse":false}]

[dpatel2016]

This is another example. The power buttons are colored to be red and green, but it just shows gray. Some of the symbols are supposed to be transparent but it shows gray.

[bartbutenaers]

Thanks for sharing a simple flow! P.S. I have edit your post to include the flow json between backticks, otherwise Node-RED gives an import error.

When I inject the message from your flow, then the animation seems to work to me?

So I assume you mean something else? Could you please explain a bit more specific what you expect to be different, because that is easier for me to start digging.

[bartbutenaers]

Hmmm, I assume you means that the colors - which you have specified in the SVG - are not being applied anymore:

For another issue, the CSS styles have been separated into the new CSS tabsheet. So there must be something were that CSS is being scoped to this SVG. I am wondering whether it could be because you use nested SVG drawings. Because the new feature limits the scope of the CSS to the current SVG drawing only. Perhaps that is a bit too restrictive. Not sure at the moment, and my time is almost up for this evening...

[bartbutenaers]

My time is up for today. Will continue tomorrow evening... @Steve-Mcl: have you any ideas about what could cause this styling issue?

[bartbutenaers]

@Steve-Mcl, When I install the 2.2.1 version, the path colors are correctly used:

But by applying the scoped css, it now fails to do that. When I remove the div class that is being applied, then the problem is solved (I think...):

Anybody with CSS knowledge who is reading this: please join the discussion, because this is not really my cup of tea...

[dpatel2016]

Yes the colors are the issue. On the CSS tab, I removed "! Important" and it works fine now.

[bartbutenaers]

@dpatel2016, Thanks for the feedback!!!! Let's keep this issue open, because I still hope that others with CSS knowledge join. Would like to get it solved ...

[smcgann99]

Bart,

I'm also seeing similar problems. see before and after last update - Also removed "! Important" and it works.

[bartbutenaers]

Yes indeed I know. But as mentioned above, I have no idea how to solve it. So unless somebody with good CSS knowledge joins, the problem won't get solved ...

[bartbutenaers]

The fix has been published as version 2.3.1. Hopefully everything is now solved...