# Node-red-contrib-ui-svg class doesn't update the sent via msg.payload

**URL:** <https://discourse.nodered.org/t/node-red-contrib-ui-svg-class-doesnt-update-the-sent-via-msg-payload/94038>\
**Category:** General\
**Created:** [20 December 2024 07:05 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-class-doesnt-update-the-sent-via-msg-payload/94038 "2024-12-20T07:05:51Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sahsha](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sahsha/32/43845_2.png) [@sahsha](https://discourse.nodered.org/u/sahsha)\
**Post date:** [20 December 2024 07:05 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-class-doesnt-update-the-sent-via-msg-payload/94038/1 "2024-12-20T07:05:51Z")

</div>

Hello, need help with node 'node-red-contrib-ui-svg'.  
I'm want to update class but it's only updating once and doesn't update the second time i.e. when blink\_red is pushed the rect in svg blinks red but when blink\_blue is pushed it doesn't work. Am I missing something?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/4/f42cbfcf479f7a8cba8ac59a141af6ee85592125.png)  
Is this related to node or browser? Is there any solution to this?  
sharing code below;

```auto
[
    {
        "id": "c12e1ff2fbf4887b",
        "type": "ui_svg_graphics",
        "z": "76372f87eed91325",
        "group": "9c199e9883de9cd2",
        "order": 0,
        "width": "10",
        "height": "9",
        "svgString": "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n<!-- Created with Inkscape (http://www.inkscape.org/) -->\n\n<svg width=\"97.206085mm\" height=\"97.206085mm\" viewBox=\"0 0 97.206085 97.206082\" version=\"1.1\" id=\"svg1\"\n inkscape:version=\"1.4 (86a8ad7, 2024-10-11)\" sodipodi:docname=\"test.svg\"\n xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"\n xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:svg=\"http://www.w3.org/2000/svg\">\n <sodipodi:namedview id=\"namedview1\" pagecolor=\"#ffffff\" bordercolor=\"#666666\" borderopacity=\"1.0\"\n inkscape:showpageshadow=\"2\" inkscape:pageopacity=\"0.0\" inkscape:pagecheckerboard=\"0\" inkscape:deskcolor=\"#d1d1d1\"\n inkscape:document-units=\"mm\" inkscape:zoom=\"0.25612023\" inkscape:cx=\"683.27285\" inkscape:cy=\"322.11434\"\n inkscape:window-width=\"1366\" inkscape:window-height=\"705\" inkscape:window-x=\"-8\" inkscape:window-y=\"-8\"\n inkscape:window-maximized=\"1\" inkscape:current-layer=\"g1\" />\n <defs id=\"defs1\" />\n <g inkscape:label=\"Layer 1\" inkscape:groupmode=\"layer\" id=\"layer1\" transform=\"translate(-33.007392,-36.623042)\">\n <g id=\"g1\">\n <rect style=\"fill:#1a1a1a;stroke:#1a1a1a;stroke-width:0.1;stroke-linecap:round;paint-order:fill markers stroke\"\n id=\"rect3\" width=\"36.156521\" height=\"32.540871\" x=\"63.532173\" y=\"68.95565\" class=\"rect3\" />\n </g>\n </g>\n</svg>",
        "clickableShapes": [],
        "javascriptHandlers": [],
        "smilAnimations": [],
        "bindings": [],
        "showCoordinates": false,
        "autoFormatAfterEdit": false,
        "showBrowserErrors": false,
        "showBrowserEvents": false,
        "enableJsDebugging": false,
        "sendMsgWhenLoaded": false,
        "noClickWhenDblClick": false,
        "outputField": "payload",
        "editorUrl": "//drawsvg.org/drawsvg.html",
        "directory": "",
        "panning": "disabled",
        "zooming": "disabled",
        "panOnlyWhenZoomed": false,
        "doubleClickZoomEnabled": false,
        "mouseWheelZoomEnabled": false,
        "dblClickZoomPercentage": 150,
        "cssString": "div.ui-svg svg {\n color: var(--nr-dashboard-widgetColor);\n fill: currentColor !important;\n}\n\ndiv.ui-svg path {fill: inherit;}\n\n\n/*------------------------------------------------*/\n@keyframes blink_red {\n\n 100%,\n 0% {fill: #550000;}\n 60% {fill: #ff0000;}\n}\n\n.blink_red {animation: blink_red 0.8s infinite;}\n\n@keyframes blink_blue {\n 100%,\n 0% {fill: #003c55;}\n 60% {fill: #00adf7;}\n}\n\n.blink_blue {animation: blink_blue 0.8s infinite;}",
        "name": "",
        "x": 520,
        "y": 440,
        "wires": [
            []
        ]
    },
    {
        "id": "ae14cc1edc5d20d3",
        "type": "function",
        "z": "76372f87eed91325",
        "name": "blink_red",
        "func": "msg.payload = [\n { \"command\": \"update_attribute\", \"selector\": \".rect3\", \"attributeName\": \"class\", \"attributeValue\": 'blink_red' },\n];\n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 320,
        "y": 420,
        "wires": [
            [
                "c12e1ff2fbf4887b"
            ]
        ]
    },
    {
        "id": "cf356c7110905e1c",
        "type": "inject",
        "z": "76372f87eed91325",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 195,
        "y": 420,
        "wires": [
            [
                "ae14cc1edc5d20d3"
            ]
        ],
        "l": false
    },
    {
        "id": "31682fc1da5a39df",
        "type": "function",
        "z": "76372f87eed91325",
        "name": "blink_blue",
        "func": "msg.payload = [\n { \"command\": \"update_attribute\", \"selector\": \".rect3\", \"attributeName\": \"class\", \"attributeValue\": 'blink_blue' },\n];\n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 320,
        "y": 460,
        "wires": [
            [
                "c12e1ff2fbf4887b"
            ]
        ]
    },
    {
        "id": "24b7ce2d93d6421b",
        "type": "inject",
        "z": "76372f87eed91325",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 195,
        "y": 460,
        "wires": [
            [
                "31682fc1da5a39df"
            ]
        ],
        "l": false
    },
    {
        "id": "9c199e9883de9cd2",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "71c6ecad02ee5d1a",
        "order": 1,
        "disp": false,
        "width": "10",
        "collapse": false,
        "className": ""
    },
    {
        "id": "71c6ecad02ee5d1a",
        "type": "ui_tab",
        "name": "Tab 1",
        "icon": "dashboard",
        "order": 2,
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

**Author:** ![sahsha](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sahsha/32/43845_2.png) [@sahsha](https://discourse.nodered.org/u/sahsha)\
**Post date:** [20 December 2024 07:18 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-class-doesnt-update-the-sent-via-msg-payload/94038/2 "2024-12-20T07:18:23Z")

</div>

😐 got the solution - instead of class "selector": ".class" now using "selector": "#id".

---

<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:** [3 January 2025 07:19 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-class-doesnt-update-the-sent-via-msg-payload/94038/3 "2025-01-03T07:19:14Z")

</div>

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