SVG在层之间添加空白答案

【问题标题】：SVG adding white space between layersSVG在层之间添加空白
【发布时间】：2018-11-15 06:26:17
【问题描述】：

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

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

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

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

【问题讨论】：

很难确定想象中的 SVG 有什么问题。请创建一个minimal reproducible example。但是无论如何，您都不需要剪切图像。只需将您的 JPEG 文件放入 SVG 中即可。然后在您希望链接所在的位置添加一些透明形状（例如矩形）。
我尝试上传一个 .ai 文件来展示它的外观，但它不允许这些类型的文件。我尝试在 jpg 上放置透明矩形并将其保存为 SVG。那行得通。我只需要添加以将矩形的导出 CSS 样式从填充：无更改为填充：透明。似乎工作。非常感谢。

【解决方案1】：

解决方案：

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

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

【讨论】：