# Dashboard 2.0 SVG variables wont work

**URL:** https://discourse.nodered.org/t/dashboard-2-0-svg-variables-wont-work/99168
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [26 September 2025 10:25 UTC](https://discourse.nodered.org/t/dashboard-2-0-svg-variables-wont-work/99168 "2025-09-26T10:25:20Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![Snotmann](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/snotmann/32/100137_2.png) [@Snotmann](https://discourse.nodered.org/u/Snotmann)
#### Post date: [26 September 2025 10:25 UTC](https://discourse.nodered.org/t/dashboard-2-0-svg-variables-wont-work/99168/1 "2025-09-26T10:25:20Z")

</div>

I got a svg with variables and try to feed some variables, but this wont work ...

```auto
<svg xmlns="http://www.w3.org/2000/svg" id="powercard" viewBox="0 0 318 318" preserveAspectRatio="xMidYMid meet">
  <style>
    .ring { fill:#fff; fill-opacity:0.1; stroke-width:3; }
    .ring.red { stroke:#c00; }
    .ring.grey { stroke:#ccc; }
    .ring.blue { stroke:#005FFF; }
    .ring.lightblue { stroke:#7FC6FE; fill:#7FC6FE; fill-opacity:0.2; }
    .ring.yellow { stroke:#FFF700; }
    .ring.brown { stroke:#5C4033; }
    .ring.green { stroke:#24FD00; }
    .ring.white { stroke:#ffffff; }

    .label { fill:#fff; font-size:0.9em; text-anchor:middle; }
    .value { fill:#fff; font-size:0.8em; text-anchor:middle; }

    .line { stroke-width:2; fill:none; }
    .line.yellow { stroke:#ff0; }
    .line.blue { stroke:#005FFF; }
    .line.red { stroke:#c00; }
    .line.grey { stroke:#ccc; }
    .line.brown { stroke:#5C4033; }

    .dot { stroke-width:6; stroke-linecap:round; fill:none; }
    .dot.yellow { stroke:#ff0; }
    .dot.blue { stroke:#005FFF; }
    .dot.red { stroke:#c00; }
    .dot.grey { stroke:#ccc; }
    .dot.brown { stroke:#5C4033; }
  </style>

  <!-- Kreise -->
  <circle cx="45" cy="45" r="32" class="ring lightblue"/>
  <circle cx="275" cy="45" r="40" class="ring red"/>
  <circle cx="160" cy="45" r="40" class="ring yellow"/>
  <circle cx="45" cy="165" r="40" class="ring grey"/>
  <circle cx="275" cy="165" r="40" class="ring white"/>
  <circle cx="160" cy="275" r="40" class="ring blue"/>
  <circle cx="275" cy="275" r="40" class="ring brown"/>
  <circle cx="45" cy="275" r="40" class="ring green"/>

  <!-- Werte -->
  <text x="45" y="50" class="value">{{msg.P1}}</text>
  <text x="160" y="28" class="value">{{msg.P2}}W</text>
  <text x="275" y="28" class="value">{{msg.P3}}W</text>
  <text x="45" y="148" class="value">{{msg.P4}}W</text>
  <text x="275" y="148" class="value">{{msg.P6}}W</text>
  <text x="160" y="258" class="value">{{msg.P8}}W</text>
  <text x="275" y="258" class="value">{{msg.P9}}L</text>
  <text x="200" y="220" fill="cornflowerblue" text-anchor="middle">{{msg.P_Bat}}W</text>

  <!-- Labels + Symbole -->
  <text x="160" y="74" class="label">PV</text>
  <text x="160" y="55" class="label">🌞</text>

  <text x="275" y="74" class="label">WP</text>
  <text x="275" y="55" class="label">🔥</text>

  <text x="275" y="192" class="label">Haus</text>
  <text x="275" y="175" class="label">🏠</text>

  <text x="160" y="298" class="label">{{msg.soc}}</text>
  <text x="160" y="280" class="label">🔋</text>

  <text x="45" y="192" class="label">Netz</text>
  <text x="45" y="175" class="label">⚡</text>

  <text x="275" y="298" class="label">Heizung</text>
  <text x="275" y="280" class="label">🔥</text>

  <!-- Erzeugung & Verbrauch unten links -->
  <text x="45" y="270" class="value"><tspan fill="#24FD00">🌞</tspan>{{msg.P_erzeugung}}kWh</text>
  <text x="45" y="290" class="value"><tspan fill="#c00">🔌</tspan>{{msg.P_verbrauch}}kWh</text>

  <!-- Linien + Punkte mit dynamischer Geschwindigkeit -->
  <g>
    <path id="lineY3" d="M160,87 C160,166 160,166 160,235" class="line yellow"/>
    <circle r="3" class="dot yellow">
      <animateMotion id="animY3" repeatCount="indefinite">
        <mpath href="#lineY3"/>
      </animateMotion>
    </circle>
  </g>

  <g>
    <path id="lineB" d="M170,235 C170,176 170,176 235,176" class="line blue"/>
    <circle r="3" class="dot blue">
      <animateMotion id="animB" repeatCount="indefinite">
        <mpath href="#lineB"/>
      </animateMotion>
    </circle>
  </g>

  <g>
    <path id="lineR2" d="M200,45 L235,45" class="line red"/>
    <circle r="3" class="dot red">
      <animateMotion id="animR2" repeatCount="indefinite">
        <mpath href="#lineR2"/>
      </animateMotion>
    </circle>
  </g>

  <g>
    <path id="lineG2" d="M87,166 C160,166 160,166 233,166" class="line grey"/>
    <circle r="3" class="dot grey">
      <animateMotion id="animG2" repeatCount="indefinite">
        <mpath href="#lineG2"/>
      </animateMotion>
    </circle>
  </g>

  <g>
    <path id="lineBr" d="M275,235 C275,210 275,210 275,205" class="line brown"/>
    <circle r="3" class="dot brown">
      <animateMotion id="animBr" repeatCount="indefinite">
        <mpath href="#lineBr"/>
      </animateMotion>
    </circle>
  </g>
  <!-- Script zum Setzen der Animation-Dauer -->
  <script>
    document.getElementById('animY3').setAttribute('dur', '{{msg.v_yellow3}}s');
    document.getElementById('animB').setAttribute('dur', '{{msg.v_blue}}s');
    document.getElementById('animR2').setAttribute('dur', '{{msg.v_red2}}s');
    document.getElementById('animG2').setAttribute('dur', '{{msg.v_grey2}}s');
    document.getElementById('animBr').setAttribute('dur', '{{msg.brown}}s');
  </script>
</svg>

```

I try to feed the duration attributes in script but they wont work and in the svg stay {{msg.v\_blue}}

Someone here could explain this ?

Regards,  
Daniel

---

<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: [26 September 2025 11:10 UTC](https://discourse.nodered.org/t/dashboard-2-0-svg-variables-wont-work/99168/2 "2025-09-26T11:10:45Z")

</div>

Try wrapping it in a `template` tag

Also, use optional chaining and fallback values e.g. `msg?.v_yellow3 || 'yellow'`

---

<div class="post-metadata">

### Author: ![Snotmann](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/snotmann/32/100137_2.png) [@Snotmann](https://discourse.nodered.org/u/Snotmann)
#### Post date: [26 September 2025 11:22 UTC](https://discourse.nodered.org/t/dashboard-2-0-svg-variables-wont-work/99168/3 "2025-09-26T11:22:47Z")

</div>

The variables are set ... i made a point with {{msg.v\_blue}} and the data is shown. Put it in template tag mess the whole grafic ... or witch part i should pack into it ?

---

<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: [26 September 2025 11:27 UTC](https://discourse.nodered.org/t/dashboard-2-0-svg-variables-wont-work/99168/4 "2025-09-26T11:27:30Z")

</div>

Actually I see you have a script element inside of the SVG (yuk) and are accessing document elements.

This script will run once and likely BEFORE msg is sent.

I recommend you use vue watchers and monitor the msg.xxxx value changing and only then update the attribute.

---

<div class="post-metadata">

### Author: ![Snotmann](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/snotmann/32/100137_2.png) [@Snotmann](https://discourse.nodered.org/u/Snotmann)
#### Post date: [26 September 2025 11:47 UTC](https://discourse.nodered.org/t/dashboard-2-0-svg-variables-wont-work/99168/5 "2025-09-26T11:47:46Z")

</div>

For me it seems so that there was no access to the variables in the template node ...

---

<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: [26 September 2025 11:48 UTC](https://discourse.nodered.org/t/dashboard-2-0-svg-variables-wont-work/99168/6 "2025-09-26T11:48:35Z")

</div>

Likely due to what I said.

> [@Steve-Mcl](#):
>
> This script will run once and likely BEFORE msg is sent.

or because it (the SVG) is NOT inside a `template` element

---

<div class="post-metadata">

### Author: ![Snotmann](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/snotmann/32/100137_2.png) [@Snotmann](https://discourse.nodered.org/u/Snotmann)
#### Post date: [26 September 2025 11:52 UTC](https://discourse.nodered.org/t/dashboard-2-0-svg-variables-wont-work/99168/7 "2025-09-26T11:52:54Z")

</div>

... but where i should place the ... im not sure.  
Several other variables are avalible like msg.P3 and so on ...

---

<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: [26 September 2025 13:20 UTC](https://discourse.nodered.org/t/dashboard-2-0-svg-variables-wont-work/99168/8 "2025-09-26T13:20:26Z")

</div>

> [@Snotmann](#):
>
> ... but where i should place the ...

When you first add a ui-template, it is pre-filled.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/0/10ac6281502b128fd73d5b26450a19a47d2db334.png)

The docs also link off to the main dashboard docs where it goes into depth with more examples.

To do more complex things like you are asking, a level of `vue` knowledge is necessary though much of it is piecing together what you want with what you know

For example, you want things to change when message values arrive. So armed with the knowledge of how vue works, you might chose to watch the `msg` and update `data` variables. Alternatively, you might just bind directly to the `msg` object using the bind syntax - but you have to understand if you only send a msg with `yellow`, then the other bindings will get `undefined` values.

But, you give you a head start - here is something possibly close to what you need:  
 ![chrome_4FPQ0QsPsQ](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/5/a55747711df0cb649b039eae2f0d89b38215db23.gif)

```html
<template>
    <svg xmlns="http://www.w3.org/2000/svg" id="powercard" viewBox="0 0 318 318" preserveAspectRatio="xMidYMid meet">
        <!-- Kreise -->
        <circle cx="45" cy="45" r="32" class="ring lightblue" />
        <circle cx="275" cy="45" r="40" class="ring red" />
        <circle cx="160" cy="45" r="40" class="ring yellow" />
        <circle cx="45" cy="165" r="40" class="ring grey" />
        <circle cx="275" cy="165" r="40" class="ring white" />
        <circle cx="160" cy="275" r="40" class="ring blue" />
        <circle cx="275" cy="275" r="40" class="ring brown" />
        <circle cx="45" cy="275" r="40" class="ring green" />

        <!-- Werte -->
        <text x="45" y="50" class="value">{{msg.P1}}</text>
        <text x="160" y="28" class="value">{{msg.P2}}W</text>
        <text x="275" y="28" class="value">{{msg.P3}}W</text>
        <text x="45" y="148" class="value">{{msg.P4}}W</text>
        <text x="275" y="148" class="value">{{msg.P6}}W</text>
        <text x="160" y="258" class="value">{{msg.P8}}W</text>
        <text x="275" y="258" class="value">{{msg.P9}}L</text>
        <text x="200" y="220" fill="cornflowerblue" text-anchor="middle">{{msg.P_Bat}}W</text>

        <!-- Labels + Symbole -->
        <text x="160" y="74" class="label">PV</text>
        <text x="160" y="55" class="label">🌞</text>

        <text x="275" y="74" class="label">WP</text>
        <text x="275" y="55" class="label">🔥</text>

        <text x="275" y="192" class="label">Haus</text>
        <text x="275" y="175" class="label">🏠</text>

        <text x="160" y="298" class="label">{{msg.soc}}</text>
        <text x="160" y="280" class="label">🔋</text>

        <text x="45" y="192" class="label">Netz</text>
        <text x="45" y="175" class="label">⚡</text>

        <text x="275" y="298" class="label">Heizung</text>
        <text x="275" y="280" class="label">🔥</text>

        <!-- Erzeugung & Verbrauch unten links -->
        <text x="45" y="270" class="value">
            <tspan fill="#24FD00">🌞</tspan>{{msg.P_erzeugung}}kWh
        </text>
        <text x="45" y="290" class="value">
            <tspan fill="#c00">🔌</tspan>{{msg.P_verbrauch}}kWh
        </text>

        <!-- Linien + Punkte mit dynamischer Geschwindigkeit -->
        <g>
            <path id="lineY3" d="M160,87 C160,166 160,166 160,235" class="line yellow" />
            <circle r="3" class="dot yellow">
                <animateMotion id="animY3" repeatCount="indefinite">
                    <mpath href="#lineY3" />
                </animateMotion>
            </circle>
        </g>

        <g>
            <path id="lineB" d="M170,235 C170,176 170,176 235,176" class="line blue" />
            <circle r="3" class="dot blue">
                <animateMotion id="animB" repeatCount="indefinite">
                    <mpath href="#lineB" />
                </animateMotion>
            </circle>
        </g>

        <g>
            <path id="lineR2" d="M200,45 L235,45" class="line red" />
            <circle r="3" class="dot red">
                <animateMotion id="animR2" repeatCount="indefinite">
                    <mpath href="#lineR2" />
                </animateMotion>
            </circle>
        </g>

        <g>
            <path id="lineG2" d="M87,166 C160,166 160,166 233,166" class="line grey" />
            <circle r="3" class="dot grey">
                <animateMotion id="animG2" repeatCount="indefinite">
                    <mpath href="#lineG2" />
                </animateMotion>
            </circle>
        </g>

        <g>
            <path id="lineBr" d="M275,235 C275,210 275,210 275,205" class="line brown" />
            <circle r="3" class="dot brown">
                <animateMotion id="animBr" repeatCount="indefinite">
                    <mpath href="#lineBr" />
                </animateMotion>
            </circle>
        </g>
    </svg>
</template>

<script>
    export default {
        watch: {
            // watch msg for any changes
            msg: function () {
                const m = this.msg
                console.log('msg changed', m)
                this.updateDuration('animY3', m.v_yellow3)
                this.updateDuration('animB', m.v_blue)
                this.updateDuration('animR2', m.v_red2)
                this.updateDuration('animG2', m.v_grey2)
                this.updateDuration('animBr', m.brown)
            }
        },
        methods: {
            updateDuration(animationId, newValue, unit = 's') {
                if (typeof newValue !== 'number' || newValue < 0) {
                    console.log(`Invalid animation duration for ${animationId}: ${newValue}`)
                    return;
                }
                console.log('Updating animation', animationId, 'to duration', newValue)
                const anim = this.$el.querySelector(`#${animationId}`)
                if (anim) {
                    anim.setAttribute('dur', (newValue ?? 5) + unit)
                }
            }
        }
    }
</script>

<style>
    .ring {
        fill: #fff;
        fill-opacity: 0.1;
        stroke-width: 3;
    }

    .ring.red {
        stroke: #c00;
    }

    .ring.grey {
        stroke: #ccc;
    }

    .ring.blue {
        stroke: #005FFF;
    }

    .ring.lightblue {
        stroke: #7FC6FE;
        fill: #7FC6FE;
        fill-opacity: 0.2;
    }

    .ring.yellow {
        stroke: #FFF700;
    }

    .ring.brown {
        stroke: #5C4033;
    }

    .ring.green {
        stroke: #24FD00;
    }

    .ring.white {
        stroke: #ffffff;
    }

    .label {
        fill: #fff;
        font-size: 0.9em;
        text-anchor: middle;
    }

    .value {
        fill: #fff;
        font-size: 0.8em;
        text-anchor: middle;
    }

    .line {
        stroke-width: 2;
        fill: none;
    }

    .line.yellow {
        stroke: #ff0;
    }

    .line.blue {
        stroke: #005FFF;
    }

    .line.red {
        stroke: #c00;
    }

    .line.grey {
        stroke: #ccc;
    }

    .line.brown {
        stroke: #5C4033;
    }

    .dot {
        stroke-width: 6;
        stroke-linecap: round;
        fill: none;
    }

    .dot.yellow {
        stroke: #ff0;
    }

    .dot.blue {
        stroke: #005FFF;
    }

    .dot.red {
        stroke: #c00;
    }

    .dot.grey {
        stroke: #ccc;
    }

    .dot.brown {
        stroke: #5C4033;
    }
</style>

```

---

<div class="post-metadata">

### Author: ![Snotmann](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/snotmann/32/100137_2.png) [@Snotmann](https://discourse.nodered.org/u/Snotmann)
#### Post date: [26 September 2025 18:52 UTC](https://discourse.nodered.org/t/dashboard-2-0-svg-variables-wont-work/99168/9 "2025-09-26T18:52:48Z")

</div>

Jesus this is amazing ... i dont got such skills in scripting.

The only thing is miss is the direction of some lines could change ... This is the input actually:`

{"\_msgid":"5b8020f9b3d25bdc","payload":2,"P1":"12.4°C","soc":"34%","soc\_icon":"battery\_2\_bar","P8":"-339","P3":"0","P2":"0","P4":"-28","P6":"367","P9":"0.0","P\_erzeugung":"0.0","P\_verbrauch":"0.0","P\_Bat":"339","w\_blue":11,"v\_blue":14.74705882352941,"d\_blue":"normal","w\_grey2":14,"v\_grey2":23.862742474916388,"d\_grey2":"normal","w\_yellow1":10,"w\_yellow2":10,"w\_yellow3":2,"v\_yellow3":0,"w\_red2":2,"v\_red2":0,"brown":0.6666666666666666}

d\_blue for example set the direction ... this can also be changed but no idea how to place it in script :-/  
Values are "normal" and "reverse" ...

Regards,  
Snot

`

---

<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: [26 October 2025 18:53 UTC](https://discourse.nodered.org/t/dashboard-2-0-svg-variables-wont-work/99168/10 "2025-10-26T18:53:12Z")

</div>

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