如何在 SVG 上叠加地图？

Question

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

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

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

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

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

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

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

谢谢！！

Answer 1

如果我做对了，我建议将所有内容放入一个 svg 中。图片可以包含<image> 标签，也支持文本。一个好处是，图形只有一个坐标空间。浏览器会执行所有缩放等操作，因此您只需要“本地 svg 坐标空间”即可。

但顺便说一下，可能是这个 css：

svg {
  pointer-events: none;
}

会做你需要的……