Need help on SVG

Dashboard
1

Dear all I have this VERY simple flow, but It didn't work.
I don't know what wrong with this, I just want to change the text and color of an Element in SVG, but I can't do it.

[{"id":"102121b4.89e68e","type":"ui_svg_graphics","z":"a01466e1.d8c328","group":"b1a0a83c.d02578","order":0,"width":0,"height":0,"svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0\" y=\"0\" height=\"100\" viewBox=\"0 0 100 100\" width=\"100\">\n  <rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"100\" height=\"100\" style=\"fill:none; stroke: none;\"/><text style=\"\" x=\"23.252033233642578\" y=\"18.536584854125977\" id=\"e1_text\" fill=\"black\" font-family=\"Arial\" font-size=\"20px\">Hello</text></svg>","clickableShapes":[],"smilAnimations":[],"bindings":[{"selector":"#e1_text","bindSource":"payload.label","bindType":"text","attribute":""},{"selector":"#e1_text","bindSource":"payload.color","bindType":"attr","attribute":"fill"}],"showCoordinates":false,"autoFormatAfterEdit":false,"outputField":"payload","editorUrl":"http://drawsvg.org/drawsvg.html","directory":"","name":"","x":620,"y":200,"wires":[[]]},{"id":"fcee325d.3f59e","type":"inject","z":"a01466e1.d8c328","name":"","topic":"","payload":"{\"label\":\"this is a test!\",\"color\":\"White\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":290,"y":180,"wires":[["102121b4.89e68e"]]},{"id":"b1a0a83c.d02578","type":"ui_group","z":"","name":"Group 1","tab":"fbefeb56.059148","order":1,"disp":true,"width":"30","collapse":false},{"id":"fbefeb56.059148","type":"ui_tab","z":"","name":"SVG","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

THanks in Advance !

2

Are you certain payload is an object and had the required property set to match up with the binding?

Attach a debug node before the and after the SVG node (ensure debug nodes have show complete msg option set)

Attach screen shots of the debug output here.

3

Hello Steve, Thanks for response.
I actually forgot that in order to do binding, the message should have a topic of 'databind', I feel so noob about that šŸ¤¦

4

Hi @Henjoe,
Thanks for your feedback, because it helps us to understand which kind of difficulties our users have!

I have added a new tutorial "Use databinding to simplify the input message structure" to the SVG node's wiki page, to avoid that other users would run into the same issue as you.
Bart

5

Thanks Bart ! :slight_smile:
I do really appreciate this amazing node.