Animating SVG from node-red

So you set the binding source to payload.msg ...

image

but you send ...

{"svg_23":{"height":250}}

The help info (read me) shows this graphic on how to link up data bindings...

^ as you can see in the above the payload contains .position.x and it is mapped to attribute x

try changing your inject to {"height":250} and your binding source to payload.height like this ...

[{"id":"a88341e1.4d4cc","type":"ui_svg_graphics","z":"cc04c471.89f4b8","group":"b072e0af.6bdc4","order":6,"width":0,"height":0,"svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"350\" height=\"300\" viewBox=\"-32.5 -9 383.5 310\">\n  <rect id=\"svgEditorBackground\" x=\"-32.5\" y=\"-9\" width=\"383.5\" height=\"310\" style=\"fill:none;stroke:none;\" />\n  <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->\n  <g>\n    <title>background</title>\n    <rect fill=\"#fff\" id=\"canvas_background\" height=\"302\" width=\"352\" y=\"-1\" x=\"-1\" />\n    <g display=\"none\" overflow=\"visible\" y=\"0\" x=\"0\" height=\"100%\" width=\"100%\" id=\"canvasGrid\">\n      <rect fill=\"url(#gridpattern)\" stroke-width=\"0\" y=\"0\" x=\"0\" height=\"100%\" width=\"100%\" />\n    </g>\n  </g>\n  <g>\n    <title>Layer 1</title>\n    <ellipse ry=\"50\" rx=\"50\" id=\"svg_10\" cy=\"234.5\" cx=\"65\" stroke-opacity=\"null\" stroke-width=\"1.5\" stroke=\"#000\" fill=\"#C97A86\" />\n    <ellipse ry=\"14\" rx=\"14\" id=\"svg_12\" cy=\"235\" cx=\"65\" stroke-opacity=\"null\" stroke-width=\"1.5\" stroke=\"#000\" fill=\"#B9FFCE\" />\n    <rect stroke=\"#000\" id=\"svg_13\" height=\"200\" width=\"60\" y=\"65\" x=\"150\" stroke-opacity=\"null\" stroke-width=\"1.5\" fill=\"#C97A86\" />\n    <text xml:space=\"preserve\" text-anchor=\"start\" font-family=\"Helvetica, Arial, sans-serif\" font-size=\"24\" id=\"svg_14\" y=\"51.5\" x=\"129.5\" stroke-opacity=\"null\" stroke-width=\"0\" stroke=\"#000\" fill=\"#000000\">Fractions</text>\n    <rect stroke=\"#000\" id=\"svg_15\" height=\"200\" width=\"59\" y=\"65\" x=\"285\" stroke-opacity=\"null\" stroke-width=\"1.5\" fill=\"#C97A86\" />\n    <text xml:space=\"preserve\" text-anchor=\"start\" font-family=\"Helvetica, Arial, sans-serif\" font-size=\"24\" id=\"svg_16\" y=\"53.5\" x=\"290.5\" fill-opacity=\"null\" stroke-opacity=\"null\" stroke-width=\"0\" stroke=\"#000\" fill=\"#000000\">WC</text>\n    <rect id=\"svg_17\" height=\"65\" width=\"60\" y=\"200\" x=\"150\" stroke-opacity=\"null\" stroke-width=\"1.5\" stroke=\"#000\" fill=\"#6D97AB\" />\n    <rect id=\"svg_18\" height=\"60\" width=\"60\" y=\"65\" x=\"150\" stroke-opacity=\"null\" stroke-width=\"1.5\" stroke=\"#000\" fill=\"#A8FFE9\" />\n    <line stroke-linecap=\"null\" stroke-linejoin=\"null\" id=\"svg_19\" y2=\"125\" x2=\"210\" y1=\"65\" x1=\"285\" stroke-opacity=\"null\" stroke-width=\"1.5\" stroke=\"#000\" fill=\"none\" />\n    <line stroke=\"#000\" stroke-linecap=\"null\" stroke-linejoin=\"null\" id=\"svg_20\" y2=\"265.23077\" x2=\"285\" y1=\"265.23077\" x1=\"210\" stroke-opacity=\"null\" stroke-width=\"1.5\" fill=\"none\" />\n    <line stroke-linecap=\"null\" stroke-linejoin=\"null\" id=\"svg_21\" y2=\"125\" x2=\"285\" y1=\"200\" x1=\"211\" stroke-opacity=\"null\" stroke-width=\"1.5\" stroke=\"#000\" fill=\"none\" />\n    <rect stroke=\"#000\" id=\"svg_23\" height=\"140\" width=\"59\" y=\"125\" x=\"285\" stroke-opacity=\"null\" stroke-width=\"1.5\" fill=\"#6D97AB\" />\n  </g>\n</svg>","clickableShapes":[],"smilAnimations":[],"bindings":[{"selector":"#svg_23","bindSource":"payload.height","bindType":"style","attribute":"height"}],"showCoordinates":true,"autoFormatAfterEdit":true,"showBrowserErrors":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"name":"","x":520,"y":720,"wires":[[]]},{"id":"4292ae05.f2c2d","type":"inject","z":"cc04c471.89f4b8","name":"data bind to height","topic":"databind","payload":"{\"height\":250}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":270,"y":720,"wires":[["a88341e1.4d4cc"]]},{"id":"b072e0af.6bdc4","type":"ui_group","z":"","name":"Stat","tab":"e88b650c.2e2928","order":1,"disp":false,"width":"6"},{"id":"e88b650c.2e2928","type":"ui_tab","z":"","name":"Stat","icon":"dashboard"}]

This might also help...

1 Like