在 JS 中使用 svg 文件进行策略游戏

Question

基本上，我正在尝试将机器人制作成一个名为 Discord 的应用程序，但我遇到了一个问题：

这是一个与战争战略游戏相关的机器人，如钢铁之心和文明。

你有一个“滚动”命令，你可以使用它攻击一个地方，根据你是否获胜，这个地方将在你的控制之下。

现在的问题是，这些“地方”恰好是州和省；全部。

我有一张包含所有这些数据的 SVG 图片，大小为 4.8mb，如果我没记错的话，它有大约 17-18k 行代码（作为 XML）。

有什么方法可以让我使用 JS 来使用 XML 图片及其路径等？ 我应该这样做吗？帆布还是别的什么？

地图将使用“地图”命令显示

如果你不知道 Discord 是什么：https://discord.gg

svg 图片：https://upload.wikimedia.org/wikipedia/commons/d/d9/Blank_Map_World_Secondary_Political_Divisions.svg1

谢谢:)

Answer 1

您可以使用 id="" 为每个路径分配一个 id，然后使用 getElementById。您还可以为每个路径指定一个 onclick() 函数，并将路径分配给一个类以提供悬停时颜色更改等功能。