# 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:** 1
**Showing post:** 8

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

```

---

_[View the full topic](https://discourse.nodered.org/t/dashboard-2-0-svg-variables-wont-work/99168)._