无法更改样式SVG

编程问答 2022-06-05

问题描述

我需要帮助， 我需要将样式参数从nodered传递给uibuilder，例如，以更改矩形的颜色

在一个函数上，我编写了以下代码：

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;

我在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;
                }
        })

并将此代码放在index.html

上 
  <rect 
    style = {{colorStatus}}
    id="status" 
    height="113.33333" 
    width="500" 
    y="1306.33334" 
    x="2033" 
    />

但是出现黑色矩形。

如果我从Chrome浏览器进行检查

<rect id = "status" height = "113.33333" width = "500" y = "1306.33334" x = "2033"> </rect>

我在哪里错了？ 也许问题是它没有正确地连接到html属性？

解决方法

首先，

  • "False" case:应该是case "False":和
  • style = {{colorStatus}}应该是style="{{colorStatus}}"。

此外，style属性具有CSS属性，因此，如果您设置style={{colorStatus}}，则

msg.colorStatus = "fill = #00b050; stroke = #001e46; stroke-width = 5";

应该是

msg.colorStatus = "fill: #00b050; stroke: #001e46; stroke-width: 5";

和

msg.colorStatus = "red";

应该是

msg.colorStatus = "fill: red";

和

msg.colorStatus = "#00b050";

应该是

msg.colorStatus = "fill: #00b050";

尽管您的代码也丢失了很多。因此，尚不清楚应该发生什么。

node-redsvgsvgsvg