如何在 SVG 上叠加地图？

Question

我正在使用 bootstrap 开发一个 Laravel 应用程序，我遇到了以下问题：

我需要在卡片顶部放置 3 个不同的层，从后到前：

• 适合卡片宽度的 jpg 响应式图像。

• svg代码（不能是svg图片，因为它是动态的，每次用户修改一条信息都必须改变）。

• 带有坐标的地图，用户必须能够点击它们。这些坐标参考背景jpg.

问题是我无法点击 svg 上的坐标，所以我尝试将带有地图的透明图像放在 svg 的顶部。然后你可以点击区域，但是它没有响应，而且地图不适合 jpg 大小。

希望我已经正确解释了我的情况。

谢谢！！

Answer 1

如果我做对了，我会建议将所有内容都放入一个 svg 中。图片可以包含在 <image> 标签中，也支持文本。一个好处是，图形只有一个坐标 space。浏览器会执行所有缩放等操作，因此您需要做的就是 »local svg 坐标 space«.

但顺便说一句，可能是这个 css:

svg {
  pointer-events: none;
}

会做你需要的…