# Animating SVG from node-red

**URL:** <https://discourse.nodered.org/t/animating-svg-from-node-red/32583>\
**Category:** General\
**Created:** [8 September 2020 08:54 UTC](https://discourse.nodered.org/t/animating-svg-from-node-red/32583 "2020-09-08T08:54:01Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![AHAV](https://avatars.discourse-cdn.com/v4/letter/a/db5fbb/32.png) [@AHAV](https://discourse.nodered.org/u/AHAV)\
**Post date:** [8 September 2020 08:54 UTC](https://discourse.nodered.org/t/animating-svg-from-node-red/32583/1 "2020-09-08T08:54:01Z")

</div>

Hi.  
Apologies for this newbie question..  
I've made a flow that works fine with the built in gauges from dashboard node.  
However I wanted to use a gauge in the UI template node from d3.js.  
I put the code from this link in the UI template.

[https://stackoverflow.com/questions/47391266/gauge-d3-display-values-positions](https://stackoverflow.com/questions/47391266/gauge-d3-display-values-positions)

However i'm stuck in how to get my flow.get("value") or dynamic numbers into the (var value = 17;) line.. replacing 17 ofcourse..

I've tested a lot of the examples around.. but my lack of javascript knowledge stops me..

isn't there a quick line of code that could fetch my msg.payload into the value variable??

---

<div class="post-metadata">

**Author:** ![AHAV](https://avatars.discourse-cdn.com/v4/letter/a/db5fbb/32.png) [@AHAV](https://discourse.nodered.org/u/AHAV)\
**Post date:** [29 September 2020 13:22 UTC](https://discourse.nodered.org/t/animating-svg-from-node-red/32583/2 "2020-09-29T13:22:00Z")

</div>

ok, I have moved further in my project.  
However my lack of javascript skills set me back..

I have gone trough the different tutorials of using SVG editor and "databinding" to move an object in my drawing. I can use the animation settings to move it, but something stops at in how to pass a single position value from a mqtt message in my positioner..

Where are the actual databind and names connecting??

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [29 September 2020 13:33 UTC](https://discourse.nodered.org/t/animating-svg-from-node-red/32583/3 "2020-09-29T13:33:40Z")

</div>

That link says nothing about data binding.

Are you using d3 in a template node OR are you referring to the databinding capabilities of [https://flows.nodered.org/node/node-red-contrib-ui-svg](https://flows.nodered.org/node/node-red-contrib-ui-svg) ?

---

<div class="post-metadata">

**Author:** ![AHAV](https://avatars.discourse-cdn.com/v4/letter/a/db5fbb/32.png) [@AHAV](https://discourse.nodered.org/u/AHAV)\
**Post date:** [29 September 2020 13:37 UTC](https://discourse.nodered.org/t/animating-svg-from-node-red/32583/4 "2020-09-29T13:37:53Z")

</div>

apologies.  
First, i was trying the d3 gauge in template node yes.

Then, now, I'm trying to draw my own "instrument" in node-red-contrib-ui-svg yes as you mention.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [29 September 2020 13:41 UTC](https://discourse.nodered.org/t/animating-svg-from-node-red/32583/5 "2020-09-29T13:41:29Z")

</div>

Then I would suggest you update the title of this thread to attract the right kind of users.

Additionally, the [read me](https://flows.nodered.org/node/node-red-contrib-ui-svg) and the [wiki](https://github.com/bartbutenaers/node-red-contrib-ui-svg/wiki) have extensive information - there is even a step by step [Use-databinding-to-simplify-the-input-message-structure](https://github.com/bartbutenaers/node-red-contrib-ui-svg/wiki/Use-databinding-to-simplify-the-input-message-structure). Have you followed that?

---

<div class="post-metadata">

**Author:** ![AHAV](https://avatars.discourse-cdn.com/v4/letter/a/db5fbb/32.png) [@AHAV](https://discourse.nodered.org/u/AHAV)\
**Post date:** [29 September 2020 14:20 UTC](https://discourse.nodered.org/t/animating-svg-from-node-red/32583/6 "2020-09-29T14:20:42Z")

</div>

I have tried, but as previously stated I am quite new on this.. Tried to isolate my nodes for some assistence. I hade to remove a lot of unneccesary stuff.  
I'm trying to change the height of the blue bar. (the number is not relevant now.. I jut want it to move..)

```auto
[{"id":"7ec73d3.008a8c4","type":"ui_svg_graphics","z":"4b106737.5f5bb8","group":"a3f8a53b.b82b18","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.msg","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":1380,"y":1260,"wires":[[]]},{"id":"82ebc8c4.edeb98","type":"inject","z":"4b106737.5f5bb8","name":"set fill attribute to yellow","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"databind","payload":"{\"svg_23\":{\"height\":250}}","payloadType":"json","x":1140,"y":1260,"wires":[["7ec73d3.008a8c4"]]},{"id":"a3f8a53b.b82b18","type":"ui_group","z":"","name":"Stat","tab":"7634cc87.2ea544","order":1,"disp":false,"width":"6"},{"id":"7634cc87.2ea544","type":"ui_tab","z":"","name":"Stat","icon":"dashboard"}]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [29 September 2020 14:37 UTC](https://discourse.nodered.org/t/animating-svg-from-node-red/32583/7 "2020-09-29T14:37:21Z")

</div>

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/5/0530f0f9dd284bce5d308ae2871617e38d0fdcee.png)

but you send ...

```auto
{"svg_23":{"height":250}}

```

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/8/287ab66b686a282e559c6df97ae3eb4249b9d25b.png)

^ 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 ...

```auto
[{"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...

> [@Contrib-ui-svg: variable height/rotation on input](https://discourse.nodered.org/t/contrib-ui-svg-variable-height-rotation-on-input/31570/3):
>
> I had 10 mins to kill... [{"id":"22a08573.3b113a","type":"ui\_svg\_graphics","z":"26ec3e81.85d802","group":"60b74369.74367c","order":3,"width":"14","height":"10","svgString":"\<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 500 500\" width=\"100%\" height=\"100%\"\>\n \<defs id=\"svgEditorDefs\"\>\n \<linearGradient gradientUnits=\"objectBoundingBox\" id=\"lgrd2-peachpuff-sienna-v\" spreadMethod=\"pad\" x1=\"0%\" x2=\"0%\" y1=\"0%\" y2=\"100%\"\>\…

---

<div class="post-metadata">

**Author:** ![AHAV](https://avatars.discourse-cdn.com/v4/letter/a/db5fbb/32.png) [@AHAV](https://discourse.nodered.org/u/AHAV)\
**Post date:** [29 September 2020 20:34 UTC](https://discourse.nodered.org/t/animating-svg-from-node-red/32583/8 "2020-09-29T20:34:07Z")

</div>

It's always easy to understand afterwards..  
Thank you Steve for pointing me in the right direction!

---

<div class="post-metadata">

**Author:** ![AHAV](https://avatars.discourse-cdn.com/v4/letter/a/db5fbb/32.png) [@AHAV](https://discourse.nodered.org/u/AHAV)\
**Post date:** [1 October 2020 13:03 UTC](https://discourse.nodered.org/t/animating-svg-from-node-red/32583/9 "2020-10-01T13:03:48Z")

</div>

moved last reply to separate topic

---

<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:** [15 October 2020 13:03 UTC](https://discourse.nodered.org/t/animating-svg-from-node-red/32583/10 "2020-10-15T13:03:59Z")

</div>

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