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

Question

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

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

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

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

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

有什么办法可以让我可以将 XML 图片及其路径等与 JS 一起使用？我应该用 Canvas 还是其他东西来做？

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

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

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

谢谢 ：）

标签： javascriptxmlsvgdiscorddiscord.js

Answer 1

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