将数据从 JavaScript 发送到 svg 文件答案

【问题标题】：Send data from JavaScript to a svg file将数据从 JavaScript 发送到 svg 文件
【发布时间】：2021-06-08 07:20:26
【问题描述】：

我正在使用 Node.js 和一个 svg 文件

我想要的是将特定值（来自 Node.js）发送到 svg 文件中的特定行

文件 findTopic.js 是一个脚本，它读取一个 svg 文件并找到类似的主题

"{ + content + }"

然后将他推入一个数组。

我有一个 data.js 文件：

const listTickets = require("../scripts/findTopic.js");
// output ['{garage/temp}', '{home/sensors/temp/kitchen}']

var mqtt = require('mqtt');
var options = {
    //*** 
};
var client = mqtt.connect('***', options);
client.on('connect', function () { // When connected
    console.log('connected');
    // subscribe to a topic
    
    for( let i = 0 ; i < listTickets.allTopics().length; i++){
        const topicSelected = listTickets.allTopics()[i];
        var newTopic = topicSelected.substring(1, topicSelected.length - 1);
        console.log(newTopic); // output: garage/temp home/sensors/temp/kitchen
        client.subscribe(newTopic, { qos: 0 });
        client.on("message", function (topic, message) {
            console.log(message.toString()); //output: 24 24
        });
        client.end(); 
    }
});

我有一个 svg 文件：

<svg width="500" height="100">
    <circle id="circle1" cx="20" cy="20" r="10"
            style="stroke: none; fill: #ff0000;"/>  
    <text x="47.872" y="11.064" >{garage/temp} °C</text>
    <circle id="circle1" cx="20" cy="20" r="10"
            style="stroke: none; fill: #ff0000;"/>
    <text x="47.872" y="11.064" >{home/sensors/temp/kitchen} °C</text>
    <circle id="circle1" cx="20" cy="20" r="10"
            style="stroke: none; fill: #ff0000;"/>
</svg>

那么现在如何将 {garage/temp} 和 {home/sensors/temp/kitchen} 的值 24 和 24 更改为我的导航器到我的 data.js 文件？

【问题讨论】：

您应该只设置一次client.on('message',...) 事件处理程序，可能在client.on('connect',...) 处理程序之外。在 for 循环中调用 client.end() 也是没有意义的。

标签： javascript node.js svg mqtt

【解决方案1】：

您如何引用 SVG 文档（因为我不知道 MQTT），例如假设您将变量引用命名为 svg？

当你知道这很简单时：

var texts = svg.getElementsByTagName("text");
for (i=0; i<texts.length; i++) {
  texts[i].replace(listTickets.allTopics()[i], message.toString());
}

或类似的东西（如果您只需要替换列表元素的内容，则不必创建新变量）。

以上假设 SVG 文件中的 TEXT 元素都是可变模板，例如没有其他 TEXT 元素。如果有，那么您应该使用 if 语句将 texts[i] 内部内容与您的 listTickets 当前索引内容（在循环中）进行比较，如果有匹配项，请替换它等。

【讨论】：