SVG在图层之间添加空白区域

Question

我有一个jpg文件，我需要变成一个响应式图像映射。我试图通过将其转换为SVG来实现这一目标。

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

在Illustrator中，文件看起来很好。但是，当我在浏览器中打开SVG文件时，可点击的图层不会排列并创建空格。

如何正确导出此图像，以便所有图层都很好地排列。

Answer 1

解决方案：

1. 将jpg粘贴到.ai文件中。
2. 创建透明矩形，我想要链接。
3. 在不同的图层上创建了矩形。
4. 在每个矩形的属性面板中，我将图像映射设置为矩形/多边形，并添加了相应的URL。
5. 点击文件 - ＆gt;另存为 - ＆gt; SVG导出为带代码的svg文件。

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

我还尝试了fill:#hexcolor和fill-opacity:0.3，以便可见的可点击区域。