使用Node-RED更改SVG属性

时间:2019-11-13 02:47:58

标签: javascript node.js svg node-red

我正在运行Node-RED的V1.0.2。

我想显示在Inkscape中绘制的SVG文件。

然后我想根据节点red内运行的某些逻辑来更新SVG的填充。

开始使用node-red-dashboard模板节点执行此操作,并设法使用以下方法更改填充颜色:

var TB1;

if (global.get("TB1_PLC") === true) {
    TB1 = {"Board": "fill:#ff6666;stroke-width:0.30222675",
     "Text": "stroke-width:0.15075836;fill:#e60000;"
    };
}
else {
   TB1 =  {"Board": "fill:#cccccc;stroke-width:0.30222675",
    "Text": "stroke-width:0.15075836;fill:#b3b3b3;"
   };
}

msg.payload = {TB1} 
return msg;

然后在SVG中我做了:

<rect
       style={{msg.payload.TB1.Board}}
       id="TB1"
       width="20.249537"
       height="122.48798"
       x="3.1327739"
       y="12.130403"
       inkscape:label="TB1" />

因此,我将设置所有变量,然后触发将msg.payload发送到模板节点的函数。

这很好。但是我需要该SVG的6个实例,这些实例都与不同的数据相关,仪表板无法正确显示,我也不想在侧面导航栏。

这就是为什么我使用node-red-contrib-uibuilder的原因 它使用VUE,并且我能够使用xxx / SVG1,xxx / SVG2等轻松分隔每个实例

我遇到的麻烦是如何将Variable填充颜色添加到HTML代码中。

如何使SVG像使用node-red-dashboard模板节点那样进行更新。

0 个答案:

没有答案