javascript - 由多个图像文件组成的响应式 map

Question

在响应式网页设计方面，我几乎是个菜鸟，我正在尝试制作一个带有交互式 map 的响应式网络应用程序。

该 map 由七个独立的图像文件组成 - 每个区域一个。必须将 map 拆分为单独的图像，以便我可以根据从数据库中获取的数据更改每个图像的透明度(以及区域颜色强度)。

我希望 map 居中，但我也希望每个区域的单独图像(构成 map )保持其位置。

我能想到的最好的类比是拼图，即使调整浏览器大小时，拼图 block 仍保持其正确位置以完成拼图图像。

实现这一目标的最简单方法是什么？

切记，我仍然需要能够控制每个区域图像的透明度。

任何帮助或建议将不胜感激，因为我不知道从哪里开始!抱歉，如果我的描述很差 - 请随时询问。

干杯，

将

Answer 1

我最终使用了 il​​lustrator 制作的 SVG，效果非常好。将其嵌入内联，而不是在目录中包含 SVG 文件。