svg - SVG在层之间添加空白

Question

我有一个 jpg 文件，我需要将其转换为响应式图像映射。我试图通过将其转换为 SVG 来做到这一点。

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

在 Illustrator 中，该文件看起来不错。但是，当我在浏览器中打开 SVG 文件时，可点击的图层不会排列并会产生空白。

如何正确导出此图像，以便所有图层排列整齐。

标签： svgadobe-illustrator

Answer 1

解决方案：

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

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

我还尝试了fill:#hexcolor让fill-opacity:0.3可点击区域可见。