SVG在层之间添加空白

我有一个jpg文件，我需要转换成一个响应图像地图。我试图通过将其转换为SVG来实现这一点

在photoshop中，我剪下每个可链接的区域，并将其粘贴为一个新层。然后我在Illustrator中打开psd文件，将链接添加到各个层的属性面板，然后将其导出到SVG

在Illustrator中，文件看起来很好。但是，当我在浏览器中打开SVG文件时，可单击的层不会对齐并创建空白

如何正确导出此图像，使所有层排列整齐。 解决方案：

将jpg粘贴到.ai文件中

创建了我想要链接的透明矩形

矩形是在不同的层上创建的

在每个矩形的属性面板中，我将图像映射设置为矩形/多边形，并添加相应的URL

单击文件->另存为->SVG导出为带有代码的SVG文件

最初，可点击的区域仍然不起作用。为了解决这个问题，在svg代码中，我将fill:none更改为fill:transparent

---

我还试验了

fill:#hexcolor

和

fill opacity:0.3

以使可点击区域可见。

很难确定虚拟SVG有什么问题。请创建一个。但是你不需要切割你的图像。只需将JPEG放入SVG即可。然后在你想要链接的地方添加一些透明的形状（例如矩形）。我试着上传一个.ai文件来显示它的外观，但它不允许这些类型的文件。我试着将透明矩形放在jpg上，并将其保存为SVG。成功了。我只需要添加一个，将导出的矩形CSS样式从fill:none更改为fill:transparent。似乎有效。非常感谢。