Unable change style svg - svg

Question

I need help,
I need to pass style arguments from nodered to uibuilder to change the color of a rectangle for example
on a function I wrote this code:
msg.topic = "CStatus"
switch (msg.payload) {
case "RUN":
msg.colorStatus = "fill = #00b050; stroke = #001e46; stroke-width = 5";
break;
"False" case:
msg.colorStatus = "red";
break;
default:
msg.colorStatus = "#00b050";
break;
}
msg.statusColMachine = msg.colorStatus;
return msg;
i created the variables on index.js
uibuilder.onChange('msg', function(newVal){
//console.info('[indexjs:uibuilder.onChange] msg received from Node-RED server:', newVal)
vueApp.msgRecvd = newVal
if (newVal.topic == "Status"){
vueApp.Status = newVal.statusMachine;
}
if (newVal.topic == "CStatus"){
vueApp.colorStatus = newVal.statusColMachine;
}
})
and put this code on index.html
<rect
style = {{colorStatus}}
id="status"
height="113.33333"
width="500"
y="1306.33334"
x="2033"
/>
But the black rectangle appears.
If I do an inspection from Chrome
<rect id = "status" height = "113.33333" width = "500" y = "1306.33334" x = "2033"> </rect>
Where am I wrong?
Maybe the problem is that it doesn't hook correctly to the html attribute?

Answer 1

For a start,
"False" case: should presumably be case "False": and
style = {{colorStatus}} should be style="{{colorStatus}}".
Also, the style attribute takes CSS properties, so if you are setting style={{colorStatus}}, then
msg.colorStatus = "fill = #00b050; stroke = #001e46; stroke-width = 5";
should presumably be
msg.colorStatus = "fill: #00b050; stroke: #001e46; stroke-width: 5";
and
msg.colorStatus = "red";
should presumably be
msg.colorStatus = "fill: red";
and
msg.colorStatus = "#00b050";
should presumably be
msg.colorStatus = "fill: #00b050";
Although there is also a lot of your code missing. So it's not exactly clear what is supposed to happen.