【发布时间】：2015-04-02 00:55:49
【问题描述】：
在响应式网页设计方面，我几乎完全是个菜鸟，我正在尝试制作一个带有交互式地图的响应式网络应用程序。
地图由七个独立的图像文件组成 - 每个区域一个。必须将地图拆分为单独的图像，以便我可以根据从数据库中获取的数据更改每个图像的透明度（以及区域颜色强度）。
我希望地图居中，但我也希望每个区域的单独图像（构成地图）保持其位置。
我能想到的最好的类比是拼图，即使调整了浏览器的大小，碎片也能保持正确的位置以完成拼图的图像。
实现这一目标的最简单方法是什么？
请记住，我仍然需要能够控制每个区域图像的透明度。
任何帮助或建议将不胜感激，因为我不知道从哪里开始！对不起，如果我的描述很差 - 请随时探讨。
干杯，
会
【问题讨论】：
-
您是在使用任何库来生成地图（例如，一些地图插件）还是一般意义上的“地图”？
-
这是一般意义上的地图 - 抱歉我的描述不佳。这是我在 Photoshop 中制作的代表世界地图的图形。我将图形导出为多个 PNG（每个区域一个），以便我可以控制每个区域图形的不透明度。我希望这是有道理的。我觉得我的描述过于复杂了。
-
我认为最好的选择是使用 SVG。有经验吗？
-
将这些地图片段存储在一个表格中，并使用媒体屏幕@进行响应式设计。应该很容易。
-
@jonmrich 我没有使用 SVG 的经验。我会调查的。如果您有任何与他们相关的资源的链接，那将非常有帮助！感谢您的建议
标签： javascript html css image responsive-design