Change the fill color of a svg element in ui-svg node when you click on it

Hi @NoviceUser,
It is easier for us if you export your flow and share it with us. Of course a simplified version, only containing the relevant stuff...

I am not sure why you use onclick == true?
Your code snippet will be triggered when the button is clicked, so you know that it is clicked. Otherwise you wouldn't arrive at this code...
Here is an example that changes color (between red and green) every time you click it:

[{"id":"795769ff.1d2ab8","type":"ui_svg_graphics","z":"4a680cc36387c937","group":"8d3148e0.0eee88","order":2,"width":"24","height":"14","svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:drawsvg=\"http://www.drawsvg.org\" id=\"svgMap\" x=\"0\" y=\"0\" viewBox=\"0 0 1920 1200\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\">\n<circle id=\"mycircle\" cx=\"50\" cy=\"50\" r=\"40\" stroke=\"none\"  fill=\"red\" />\n</svg>","clickableShapes":[],"javascriptHandlers":[{"selector":"#mycircle","action":"click","sourceCode":"if ($(this).attr(\"fill\") == \"red\") {\n   $(this).attr(\"fill\", \"green\");\n}\nelse {\n   $(this).attr(\"fill\", \"red\");\n}"}],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":true,"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":980,"y":860,"wires":[[]]},{"id":"8d3148e0.0eee88","type":"ui_group","name":"7Shield","tab":"9cdb817b.45e12","order":1,"disp":false,"width":"24","collapse":false,"className":""},{"id":"9cdb817b.45e12","type":"ui_tab","name":"Energy","icon":"dashboard","order":41,"disabled":false,"hidden":false}]

Bart

1 Like