javascript - 自动将 svg 中的形状转换为按钮以显示附加信息

Question

我有一张用 CorelDRAW 绘制的 map ，其中显示了一些公司 Assets 的位置。每一个都在 map 上显示为一个正方形。我的目标是创建一个交互式版本的 map ，用户可以单击一个正方形并显示有关 Assets 的更多信息。

CorelDRAW 允许我为每个形状指定一个名称。然后，如果图表导出为 SVG，形状名称将用于 id 属性。

这给了我一个 SVG 格式的 map ；假设它看起来像这样:

<svg width="100" height="100">
    <rect id="firstAsset" x="25" y="50" width="20" height="20" />
    <rect id="secondAsset" x="50" y="15" width="20" height="20" />
</svg>

我希望能够单击每个矩形并显示有关它的信息。弹出窗口即可，例如 this example at w3cschools ，或者模式框(如果有更多信息要显示)。

所以，我首先在 html 文档中嵌入一个测试 svg。这并不意味着它最终会出现在网络服务器上；而是意味着它最终会出现在网络服务器上。该文件可能最终保存在 SharePoint 上。理想情况下，它最终会是一个可以在需要时通过电子邮件分发的单个文件。

这是我到目前为止使用模态框所得到的:link to js fiddle .

问题是，完整的 SVG 将具有数十个可点击的形状，如果在 CorelDRAW 中更新 map ，我将不得不重新向每个形状添加 onclick() 和类属性。我需要能够以某种标准格式获取有关每个 Assets 的信息，然后将其自动添加到 SVG 中的每个 Assets 中。

我最初设想编写一个脚本，该脚本将采用 SVG 文件和包含要显示的信息的文件。它将在 SVG 中搜索 id 属性，检查要显示的相应信息，如果是，则使元素可单击以显示该信息。这就是我被困住的地方。我需要编写一个单独的程序来维护这个 map 吗？或者可以在文档本身中使用 javascript 来完成此操作吗？

回顾一下，我有:

• 自动生成的 SVG，其中包含每个 Assets 的 id 属性
• 我将获得有关每个 Assets 的一些信息，我可以将其放入 html 格式

我希望能够单击 map 上的 Assets 并显示有关它的信息。

附注我是 html 和 javascript 新手。

Answer 1

此代码示例可能会帮助您入门。

var rect = document.querySelectorAll('rect');

rect.forEach(item=>{  
  item.addEventListener('click', tooltip);
});

function tooltip(){
  console.log(this.id);
}