# Hi i have a problem with msg.payload and svg node graphics

**URL:** <https://discourse.nodered.org/t/hi-i-have-a-problem-with-msg-payload-and-svg-node-graphics/77391>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, function-node\
**Created:** [9 April 2023 17:13 UTC](https://discourse.nodered.org/t/hi-i-have-a-problem-with-msg-payload-and-svg-node-graphics/77391 "2023-04-09T17:13:24Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Villarreal94](https://avatars.discourse-cdn.com/v4/letter/v/8edcca/32.png) [@Villarreal94](https://discourse.nodered.org/u/Villarreal94)\
**Post date:** [9 April 2023 17:13 UTC](https://discourse.nodered.org/t/hi-i-have-a-problem-with-msg-payload-and-svg-node-graphics/77391/1 "2023-04-09T17:13:24Z")

</div>

Hello, i have the next flow...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/a/6af428ac4c7efb437b926d73715980a2c673f0b8.png)

And in the function node i put the next js...

 ![Captura2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/6/f6756ebe174e6ef09d585936ac5a0730761f5346.png)

But i have an error when show me in the debug console... i want to change colour with msg.payload of the image of the pump in svg file node... some solution please??

cannot connect or some error

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [9 April 2023 17:26 UTC](https://discourse.nodered.org/t/hi-i-have-a-problem-with-msg-payload-and-svg-node-graphics/77391/2 "2023-04-09T17:26:24Z")

</div>

Hi @Villarreal94,  
Welcome to this forum!  
You can find a tutorial for that on my [wiki](https://github.com/bartbutenaers/node-red-contrib-ui-svg/wiki/Dynamically-change-a-style-attribute-(like-fill-color)) page.  
Bart

---

<div class="post-metadata">

**Author:** ![Villarreal94](https://avatars.discourse-cdn.com/v4/letter/v/8edcca/32.png) [@Villarreal94](https://discourse.nodered.org/u/Villarreal94)\
**Post date:** [9 April 2023 17:35 UTC](https://discourse.nodered.org/t/hi-i-have-a-problem-with-msg-payload-and-svg-node-graphics/77391/3 "2023-04-09T17:35:24Z")

</div>

Thank you! But I still don't understand the error why it appears in the debug console, what do I have to do with msg.payload?  
In the case of CSS, would I have to place it in the function node or in svg? because i need the value of msg.payload as input to false or true...

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [9 April 2023 20:21 UTC](https://discourse.nodered.org/t/hi-i-have-a-problem-with-msg-payload-and-svg-node-graphics/77391/4 "2023-04-09T20:21:28Z")

</div>

I am not quite sure what is not clear to you in my tutorial. There is an example flow in the tutorial, that you can import in your flow editor and explains how this works. And there also are some example payloads added, which you can just copy-paste.

You have used a completely different payload. Not sure where you got that from? But if you inject a message with some self-invented content, then nodes don't know what to do with it. So you will get errors

---

<div class="post-metadata">

**Author:** ![Villarreal94](https://avatars.discourse-cdn.com/v4/letter/v/8edcca/32.png) [@Villarreal94](https://discourse.nodered.org/u/Villarreal94)\
**Post date:** [9 April 2023 21:05 UTC](https://discourse.nodered.org/t/hi-i-have-a-problem-with-msg-payload-and-svg-node-graphics/77391/5 "2023-04-09T21:05:19Z")

</div>

Yes ill try to import the script ando view the flow anda the nodes, i have a PLC node s7 and i try to connect with a svg formato graphic and i don't know if i convert in json format, i'll see your nodes y i'll Say to You if i can connect, thanks!

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [9 April 2023 21:39 UTC](https://discourse.nodered.org/t/hi-i-have-a-problem-with-msg-payload-and-svg-node-graphics/77391/6 "2023-04-09T21:39:28Z")

</div>

Just try to understand the simple example. In the wiki you find some other tutorials, and there is also info on the [readme](https://github.com/bartbutenaers/node-red-contrib-ui-svg#control-via-messages) page about the input messages. As soon as you are familiar with the format, you need to try to build your own messages with that format.

As you can see the msg.payload always needs to contain a command, or an array of commands. Otherwise the node does not what it needs to do. If you don't specify a command, then the node expects a topic containing a command (which is also explained on the readme page). But since your payload does not contain a command, you get the error: _"The specified msg.topic is not supported"_. But that will hopefully become clear after reading some of the documentation

---

<div class="post-metadata">

**Author:** ![Villarreal94](https://avatars.discourse-cdn.com/v4/letter/v/8edcca/32.png) [@Villarreal94](https://discourse.nodered.org/u/Villarreal94)\
**Post date:** [9 April 2023 22:39 UTC](https://discourse.nodered.org/t/hi-i-have-a-problem-with-msg-payload-and-svg-node-graphics/77391/7 "2023-04-09T22:39:15Z")

</div>

Yes your example show how change the colour of the image of the camera, but, in my case, i need with conditions for msg.payload to change the colours, because its boolean the data input, and i have a function node, with javascript, in your case its an inject node only, i need to read with if and else and run in the svg node

---

<div class="post-metadata">

**Author:** ![Villarreal94](https://avatars.discourse-cdn.com/v4/letter/v/8edcca/32.png) [@Villarreal94](https://discourse.nodered.org/u/Villarreal94)\
**Post date:** [9 April 2023 22:43 UTC](https://discourse.nodered.org/t/hi-i-have-a-problem-with-msg-payload-and-svg-node-graphics/77391/8 "2023-04-09T22:43:07Z")

</div>

And in your case its with a click on the camera image, in my case it's about conditions of the value of msg.payload... and thats my dude, i was trying all and i cannot change... i need develop conditions with javascript not with event on svg node i think... i dont know

---

<div class="post-metadata">

**Author:** ![Villarreal94](https://avatars.discourse-cdn.com/v4/letter/v/8edcca/32.png) [@Villarreal94](https://discourse.nodered.org/u/Villarreal94)\
**Post date:** [9 April 2023 23:00 UTC](https://discourse.nodered.org/t/hi-i-have-a-problem-with-msg-payload-and-svg-node-graphics/77391/9 "2023-04-09T23:00:52Z")

</div>

Uploading: image.png...

 ![Captura3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/6/76a6f40ace5b65a462f07f85c53e8d38db492264.png)  
 ![Captura4](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/0/d07de4814c02ca61df61c81621c1ecbf7d6a33d5.png)

[flow probe.txt](https://discourse.nodered.org/uploads/short-url/3uunoyumkrTLv7VupcXGyK6Ymlv.txt) (17.9 KB)

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [10 April 2023 06:11 UTC](https://discourse.nodered.org/t/hi-i-have-a-problem-with-msg-payload-and-svg-node-graphics/77391/10 "2023-04-10T06:11:29Z")

</div>

I've taken **your** flow and replaced the S7 node (as I don't use it) with two Inject nodes.  
 ![true_false_flow](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/5/35a737a069a2123990b9ab9a9eaa819c0c34ab1a.png)  
Injecting 'true' or 'false' into your _'function 1'_ node seems to produce the correct visual response.

Maybe you should check the output from your serial node to make sure it is of type 'boolean'.

![red_true](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/e/6e53d321b1743c20977091d5382ce85e7596c37c.png)

![blue_false](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/1/51ff0e0a4d2d459a75bd397ce9934ed93e5d474d.png)

---

<div class="post-metadata">

**Author:** ![Villarreal94](https://avatars.discourse-cdn.com/v4/letter/v/8edcca/32.png) [@Villarreal94](https://discourse.nodered.org/u/Villarreal94)\
**Post date:** [10 April 2023 14:01 UTC](https://discourse.nodered.org/t/hi-i-have-a-problem-with-msg-payload-and-svg-node-graphics/77391/11 "2023-04-10T14:01:10Z")

</div>

Nice, but yo havent the problem of msg.topic?  
 ![Capturatopic](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/3/639d4af807ae8370796292d8681f35614c246bde.png)

Cause now i can view the change in the node svg graphics but i dont know the reason of that mistake..

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [10 April 2023 14:29 UTC](https://discourse.nodered.org/t/hi-i-have-a-problem-with-msg-payload-and-svg-node-graphics/77391/12 "2023-04-10T14:29:23Z")

</div>

I don't understand your answer about `msg.topic` Where does that come in?  
Where is node:cc2663cf...........?  
If you give it a name it will be easier for people locate and advise you.

---

<div class="post-metadata">

**Author:** ![Villarreal94](https://avatars.discourse-cdn.com/v4/letter/v/8edcca/32.png) [@Villarreal94](https://discourse.nodered.org/u/Villarreal94)\
**Post date:** [10 April 2023 14:35 UTC](https://discourse.nodered.org/t/hi-i-have-a-problem-with-msg-payload-and-svg-node-graphics/77391/13 "2023-04-10T14:35:43Z")

</div>

Excuse me, it would be the node svg graphics

I don't know why I get that error... from msg.topic is not supported in the previous image in the debug

 ![Capturanodo](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/2/221ad6f584c22063846058691adc60288686390f.png)

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [10 April 2023 14:43 UTC](https://discourse.nodered.org/t/hi-i-have-a-problem-with-msg-payload-and-svg-node-graphics/77391/14 "2023-04-10T14:43:16Z")

</div>

If I put a debug node on the output pin of the SVG node I don't get an error.

Could you post the (revised) flow that is giving the error?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [10 April 2023 14:52 UTC](https://discourse.nodered.org/t/hi-i-have-a-problem-with-msg-payload-and-svg-node-graphics/77391/15 "2023-04-10T14:52:34Z")

</div>

I don't use that node, but I notice that the messages that @Villarreal94 shows in the debug have no topic, whereas if your inject nodes are using the default setting they may be injecting an empty string. Perhaps that is the difference. I see that the SVG node does allow control data to be passed in via topic, perhaps it does not cope with a completely missing topic.

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [10 April 2023 14:55 UTC](https://discourse.nodered.org/t/hi-i-have-a-problem-with-msg-payload-and-svg-node-graphics/77391/16 "2023-04-10T14:55:45Z")

</div>

Yes I spotted that, although in my test flow it didn't cause any errors.  
That was my next suggestion - to remove the default "topic" from the Inject node as it serves no purpose.  
Here is a revised flow to check-out.

 ![revised_flow](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/b/1b45a85e31d7f3358a9ca5d8979ad35ecbfd8193.png)

```auto
[{"id":"ed05e7d079fb5e63","type":"debug","z":"6e8293384806f186","name":"debug 1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":640,"y":240,"wires":[]},{"id":"0ace04ddd9da919c","type":"ui_svg_graphics","z":"6e8293384806f186","group":"d91b0467b426ae08","order":0,"width":"5","height":"5","svgString":"<svg xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\" xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"100%\" height=\"100%\" viewBox=\"1382.54345703125 394.55853271484375 410.8680419921875 356.9156494140625\" version=\"1.1\" id=\"svg5\" xml:space=\"preserve\" inkscape:version=\"1.2.2 (732a01da63, 2022-12-09)\" sodipodi:docname=\"Pump1.svg\" preserveAspectRatio=\"xMinYMin meet\"><rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"1920\" height=\"1080\" style=\"fill:none;stroke:none\"/><sodipodi:namedview id=\"namedview7\" pagecolor=\"#ffffff\" bordercolor=\"#000000\" borderopacity=\"0.25\" inkscape:showpageshadow=\"2\" inkscape:pageopacity=\"0.0\" inkscape:pagecheckerboard=\"0\" inkscape:deskcolor=\"#d1d1d1\" inkscape:document-units=\"px\" showgrid=\"false\" inkscape:zoom=\"0.64379276\" inkscape:cx=\"665.58685\" inkscape:cy=\"542.87656\" inkscape:window-width=\"1920\" inkscape:window-height=\"1001\" inkscape:window-x=\"-9\" inkscape:window-y=\"-9\" inkscape:window-maximized=\"1\" inkscape:current-layer=\"layer1\"/><defs id=\"defs2\"/><g inkscape:label=\"Capa 1\" inkscape:groupmode=\"layer\" id=\"layer1\"><g id=\"g319\" transform=\"matrix(0.86680977,0,0,0.82939545,279.83044,465.95041)\" style=\"image-rendering:auto\"><g id=\"Group_OutletPort\">\n\t\n\t\t<linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"119.3706\" y1=\"-412.02271\" x2=\"119.3706\" y2=\"-361.6145\" gradientTransform=\"matrix(1,0,0,-1,0,-360.895)\">\n\t\t<stop offset=\"0\" style=\"stop-color:#004C00\" id=\"stop131\"/>\n\t\t<stop offset=\"0.21\" style=\"stop-color:#007000\" id=\"stop133\"/>\n\t\t<stop offset=\"0.54\" style=\"stop-color:#4BA54B\" id=\"stop135\"/>\n\t\t<stop offset=\"0.64\" style=\"stop-color:#3D9E3D\" id=\"stop137\"/>\n\t\t<stop offset=\"0.79\" style=\"stop-color:#178B17\" id=\"stop139\"/>\n\t\t<stop offset=\"0.97\" style=\"stop-color:#006C00\" id=\"stop141\"/>\n\t\t<stop offset=\"1\" style=\"stop-color:#006500\" id=\"stop143\"/>\n\t</linearGradient>\n\t<rect x=\"110.662000\" y=\"0.7190165520220262\" fill=\"url(#SVGID_1_)\" stroke=\"#b3b3b3\" stroke-width=\"0.5\" width=\"13.101000\" height=\"50.408000\" id=\"rect146\" style=\"fill:url(#SVGID_1_)\" transform=\"matrix(1.10869 0 0 1.10869 1367.93 37.3177)\"/>\n\t\n\t\t<linearGradient id=\"SVGID_2_\" gradientUnits=\"userSpaceOnUse\" x1=\"83.070801\" y1=\"76.919701\" x2=\"83.070801\" y2=\"115.9207\" gradientTransform=\"matrix(1,0,0,-1,0,122.105)\">\n\t\t<stop offset=\"0\" style=\"stop-color:#004C00\" id=\"stop148\"/>\n\t\t<stop offset=\"0.52\" style=\"stop-color:#63B163\" id=\"stop150\"/>\n\t\t<stop offset=\"1\" style=\"stop-color:#006500\" id=\"stop152\"/>\n\t</linearGradient>\n\t<polyline fill=\"url(#SVGID_2_)\" points=\"51.0758,6.18403,110.748,6.18403,110.748,45.185,100.358,45.185\" id=\"polyline155\" style=\"fill:url(#SVGID_2_)\" transform=\"matrix(1.10869 0 0 1.10869 1367.93 37.3177)\"/>\n</g><g id=\"Group_Legs\">\n\t\n\t\t<linearGradient id=\"SVGID_3_\" gradientUnits=\"userSpaceOnUse\" x1=\"52.528301\" y1=\"1094.1335\" x2=\"52.528301\" y2=\"1058.2527\" gradientTransform=\"translate(0,-973.75)\">\n\t\t<stop offset=\"0\" style=\"stop-color:#319831\" id=\"stop158\"/>\n\t\t<stop offset=\"1\" style=\"stop-color:#006500\" id=\"stop160\"/>\n\t</linearGradient>\n\t<path fill=\"url(#SVGID_3_)\" stroke=\"#999999\" stroke-width=\"0.396\" d=\"M9.161749,120.384L19.415749,84.503h61.908l10.252,35.881H70.806749L50.302749,89.497L29.533749,120.384Z\" id=\"path163\" style=\"fill:url(#SVGID_3_)\" transform=\"matrix(1.10869 0 0 1.10869 1367.93 37.3177)\"/>\n</g><g id=\"Group_LegBase\">\n\t<path fill=\"#319831\" stroke=\"#b3b3b3\" stroke-width=\"0.5\" d=\"m0.76,115.851h37.533v5.254H-1.399251Z\" id=\"path166\" transform=\"matrix(1.10869 0 0 1.10869 1367.93 37.3177)\"/>\n\t<path fill=\"#319831\" stroke=\"#b3b3b3\" stroke-width=\"0.5\" d=\"m66.603,115.851h37.929v5.254H64.443749Z\" id=\"path168\" transform=\"matrix(1.10869 0 0 1.10869 1367.93 37.3177)\"/>\n</g><g id=\"Group_PumpBody\">\n\t\n\t\t<radialGradient id=\"SVGID_4_\" cx=\"126.48\" cy=\"837.1521\" r=\"51.565899\" gradientTransform=\"matrix(0.9999,0.0069,-0.0069,0.9999,-67.9976,-780.2224)\" gradientUnits=\"userSpaceOnUse\">\n\t\t<stop offset=\"0.18\" style=\"stop-color:#003200\" id=\"stop171\"/>\n\t\t<stop offset=\"0.26\" style=\"stop-color:#003700\" id=\"stop173\"/>\n\t\t<stop offset=\"0.35\" style=\"stop-color:#004400\" id=\"stop175\"/>\n\t\t<stop offset=\"0.44\" style=\"stop-color:#005B00\" id=\"stop177\"/>\n\t\t<stop offset=\"0.54\" style=\"stop-color:#007A00\" id=\"stop179\"/>\n\t\t<stop offset=\"0.64\" style=\"stop-color:#47A347\" id=\"stop181\"/>\n\t\t<stop offset=\"0.72\" style=\"stop-color:#97CB97\" id=\"stop183\"/>\n\t\t<stop offset=\"0.81\" style=\"stop-color:#61B061\" id=\"stop185\"/>\n\t\t<stop offset=\"0.99\" style=\"stop-color:#006A00\" id=\"stop187\"/>\n\t\t<stop offset=\"1\" style=\"stop-color:#006500\" id=\"stop189\"/>\n\t</radialGradient>\n\t<path fill=\"url(#SVGID_4_)\" d=\"M50.887749,6.158C79.364749,6.354,102.289749,29.597,102.094749,58.075C101.899749,86.55,78.656749,109.473,50.180749,109.279C21.702749,109.086,-1.221251,85.841,-1.026251,57.364C-0.833251,28.889,22.413749,5.963,50.887749,6.158Z\" id=\"path192\" style=\"fill:url(#SVGID_4_)\" transform=\"matrix(1.10869 0 0 1.10869 1367.93 37.3177)\"/>\n</g><g id=\"Group_CenterShade\">\n\t\n\t\t<radialGradient id=\"SVGID_5_\" cx=\"52.4468\" cy=\"-418.72681\" r=\"27.244101\" gradientTransform=\"matrix(1,0,0,-1,0,-360.895)\" gradientUnits=\"userSpaceOnUse\">\n\t\t<stop offset=\"0\" style=\"stop-color:#000000\" id=\"stop195\"/>\n\t\t<stop offset=\"1\" style=\"stop-color:#003200\" id=\"stop197\"/>\n\t</radialGradient>\n\t<path fill=\"url(#SVGID_5_)\" d=\"M36.239749,81.168C23.348749,73.407,19.190749,56.67,26.951749,43.78C34.713749,30.892,51.453749,26.735,64.336749,34.495c12.891,7.761,17.047,24.498,9.289,37.393c-7.764,12.881,-24.499,17.04,-37.386,9.28Z\" id=\"path200\" style=\"fill:url(#SVGID_5_)\" transform=\"matrix(1.10869 0 0 1.10869 1367.93 37.3177)\"/>\n</g><g id=\"Group_Impeller\">\n\t\n\t\t<linearGradient id=\"SVGID_6_\" gradientUnits=\"userSpaceOnUse\" x1=\"101.9819\" y1=\"125.5398\" x2=\"106.1411\" y2=\"125.5342\" gradientTransform=\"matrix(0.9889,0.1484,0.1484,-0.9889,-69.6528,166.4384)\">\n\t\t<stop offset=\"0.01\" style=\"stop-color:#006500\" id=\"stop203\"/>\n\t\t<stop offset=\"0.51\" style=\"stop-color:#6FB76F\" id=\"stop205\"/>\n\t\t<stop offset=\"1\" style=\"stop-color:#006500\" id=\"stop207\"/>\n\t</linearGradient>\n\t<path fill=\"url(#SVGID_6_)\" d=\"m51.014,77.055c-0.642,4.14,-2.024,7.351,-3.166,7.187c-1.139,-0.165,-1.545,-3.651,-0.902,-7.789l0.014,-0.081l5.874,-37.983c0.64,-4.139,1.986,-7.314,3.125,-7.149c1.142,0.163,1.507,3.623,0.866,7.76Z\" id=\"path210\" style=\"fill:url(#SVGID_6_)\" transform=\"matrix(1.10869 0 0 1.10869 1367.93 37.3177)\"/>\n\t\n\t\t<linearGradient id=\"SVGID_7_\" gradientUnits=\"userSpaceOnUse\" x1=\"-277.9653\" y1=\"21.0618\" x2=\"-273.8071\" y2=\"21.0562\" gradientTransform=\"matrix(0.6317,-0.7752,-0.7752,-0.6317,243.0495,-142.3917)\">\n\t\t<stop offset=\"0.01\" style=\"stop-color:#006500\" id=\"stop212\"/>\n\t\t<stop offset=\"0.51\" style=\"stop-color:#6FB76F\" id=\"stop214\"/>\n\t\t<stop offset=\"1\" style=\"stop-color:#006500\" id=\"stop216\"/>\n\t</linearGradient>\n\t<path fill=\"url(#SVGID_7_)\" d=\"m68.625,68.765c3.234,2.659,5.291,5.485,4.57,6.387c-0.724,0.895,-3.931,-0.533,-7.162,-3.193L63.810749,71.906L34.124749,47.493c-3.234,-2.66,-5.28,-5.437,-4.559,-6.333c0.722,-0.898,3.884,0.55,7.117,3.21Z\" id=\"path219\" style=\"fill:url(#SVGID_7_)\" transform=\"matrix(1.10869 0 0 1.10869 1367.93 37.3177)\"/>\n\t\n\t\t<linearGradient id=\"SVGID_8_\" gradientUnits=\"userSpaceOnUse\" x1=\"216.76511\" y1=\"433.11789\" x2=\"220.92329\" y2=\"433.1123\" gradientTransform=\"matrix(0.4225,0.9064,0.9064,-0.4225,-432.8737,42.0522)\">\n\t\t<stop offset=\"0.01\" style=\"stop-color:#006500\" id=\"stop221\"/>\n\t\t<stop offset=\"0.51\" style=\"stop-color:#6FB76F\" id=\"stop223\"/>\n\t\t<stop offset=\"1\" style=\"stop-color:#006500\" id=\"stop225\"/>\n\t</linearGradient>\n\t<path fill=\"url(#SVGID_8_)\" d=\"m35.58,67.368c-3.803,1.752,-7.245,2.373,-7.739,1.332c-0.491,-1.041,2.193,-3.306,5.994,-5.057L31.751749,63.61L66.660749,47.527c3.805,-1.752,7.195,-2.384,7.686,-1.345c0.494,1.041,-2.188,3.258,-5.99,5.008Z\" id=\"path228\" style=\"fill:url(#SVGID_8_)\" transform=\"matrix(1.10869 0 0 1.10869 1367.93 37.3177)\"/>\n\t\n\t\t<radialGradient id=\"SVGID_9_\" cx=\"51.976601\" cy=\"64.424599\" r=\"6.5409999\" gradientTransform=\"matrix(1,0,0,-1,0,122.105)\" gradientUnits=\"userSpaceOnUse\">\n\t\t<stop offset=\"0\" style=\"stop-color:#6FB76F\" id=\"stop230\"/>\n\t\t<stop offset=\"0.47\" style=\"stop-color:#6BB56B\" id=\"stop232\"/>\n\t\t<stop offset=\"0.64\" style=\"stop-color:#5DAE5D\" id=\"stop234\"/>\n\t\t<stop offset=\"0.76\" style=\"stop-color:#45A245\" id=\"stop236\"/>\n\t\t<stop offset=\"0.85\" style=\"stop-color:#239123\" id=\"stop238\"/>\n\t\t<stop offset=\"0.94\" style=\"stop-color:#007C00\" id=\"stop240\"/>\n\t\t<stop offset=\"1\" style=\"stop-color:#006500\" id=\"stop242\"/>\n\t</radialGradient>\n\t<path fill=\"url(#SVGID_9_)\" d=\"m53.274,51.269c3.543,0.718,5.829,4.168,5.11,7.709c-0.717,3.544,-4.167,5.83,-7.71,5.113c-3.536,-0.719,-5.824,-4.171,-5.105,-7.711c0.715,-3.536,4.17,-5.828,7.705,-5.111Z\" id=\"path245\" style=\"fill:url(#SVGID_9_)\" transform=\"matrix(1.10869 0 0 1.10869 1367.93 37.3177)\"/>\n</g></g></g></svg>","clickableShapes":[{"targetId":"#path192","action":"change","payload":"path192","payloadType":"str","topic":"path192"}],"javascriptHandlers":[],"smilAnimations":[],"bindings":[],"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;\n}","name":"","x":660,"y":280,"wires":[["cb25cf5e5d3f15c0"]]},{"id":"5a6afd53f4176e72","type":"function","z":"6e8293384806f186","name":"function 1","func":"var css = '';\nif (msg.payload == true) {\n css = {\n \"command\": \"update_style\",\n \"selector\": \"#path192\",\n \"attributeName\": \"fill\",\n \"attributeValue\": \"red\"\n }; // Cambia el color de relleno a rojo si el valor es true\n} else {\n css = {\n \"command\": \"update_style\",\n \"selector\": \"#path192\",\n \"attributeName\": \"fill\",\n \"attributeValue\": \"blue\"\n }; // Cambia el color de relleno a verde si el valor es false\n}\n\nmsg.payload = css;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":480,"y":280,"wires":[["0ace04ddd9da919c","ed05e7d079fb5e63"]]},{"id":"674ec7e4b70f6e75","type":"inject","z":"6e8293384806f186","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":330,"y":260,"wires":[["5a6afd53f4176e72"]]},{"id":"bf6529d3748ac904","type":"inject","z":"6e8293384806f186","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":330,"y":300,"wires":[["5a6afd53f4176e72"]]},{"id":"cb25cf5e5d3f15c0","type":"debug","z":"6e8293384806f186","name":"debug 2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":840,"y":280,"wires":[]},{"id":"aceebe33d2f42ec4","type":"comment","z":"6e8293384806f186","name":"Revised flow with msg.topic removed from Inject nodes","info":"","x":460,"y":180,"wires":[]},{"id":"d91b0467b426ae08","type":"ui_group","name":"Project 1","tab":"3d6b404125e26ac7","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"3d6b404125e26ac7","type":"ui_tab","name":"Group 1","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [24 April 2023 14:56 UTC](https://discourse.nodered.org/t/hi-i-have-a-problem-with-msg-payload-and-svg-node-graphics/77391/17 "2023-04-24T14:56:19Z")

</div>

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