Vector Safari中的SVG嵌入错误迫使我寻找另一个选项

我正在为触摸屏建立一个互动网站，它运行最新版本的谷歌Chrome。在这种情况下，用户必须点击一系列建筑物才能获得更多信息。其想法是绝对定位超链接，并将其放置在建筑物顶部，这些建筑物组合在一个背景图像中。但正如您在下面看到的，问题在于某些超链接重叠。用户在不知情的情况下点击错误建筑的可能性很大

因为我已经有了每个建筑的矢量掩码，所以我认为最好不要使用超链接，而是使用SVG文件。SVG文件支持一个名为xlink的标记，可以使用该标记使矢量对象可链接。链接到另一个文件的可单击区域不再是正方形，而是具有与矢量遮罩相同的形状。就像我在超链接上做的一样，我把它们放在了建筑物的顶部。这在Firefox中很好用，但在Chrome和Safari中都不行！显然，Webkit bugs.Webkit.org/show_bug.cgi？id=22986中有一个bug，它会导致浏览器始终显示白色背景，忽略矢量对象的形状，因此它被渲染为方形对象

通常情况下，SVG嵌入的不透明度将设置为零，但为了向您说明问题所在，我将其设置为1

使用Firefox不是一种选择。HTML中的区域标记花费了太多的时间。所以我被卡住了。有人知道这个问题的另一种解决方案吗

您需要将遮罩转换为s 为Safari创建svg代码严格的条件！ 将s不透明度和填充不透明度设置为0 不要忘记目标属性

您需要将遮罩转换为s 为Safari创建svg代码严格的条件！ 将s不透明度和填充不透明度设置为0

---

不要忘记目标属性

是1个svg文件出现问题，还是为每个建筑创建一个svg文件？你能不能制作一个覆盖整个页面的svg文件。您可以将图像嵌入到svg文件中吗？你能将svg嵌入html而不是作为外部文件吗？谢谢DiggyF的回复，但我刚刚找到了解决问题的方法。Illustrator似乎在SVG文件的XML结构中添加了一个名为clipPath的标记。这导致xlink在Webkit中被塑造成矩形，而不是我想要的路径。这并不能解决Webkit中的白色背景错误，但这无论如何都不是问题，因为我将SVG的不透明度设置为零。无论如何谢谢你！问题是发生在1个svg文件中，还是为每个建筑创建一个svg文件？你能不能制作一个覆盖整个页面的svg文件。您可以将图像嵌入到svg文件中吗？你能将svg嵌入html而不是作为外部文件吗？谢谢DiggyF的回复，但我刚刚找到了解决问题的方法。Illustrator似乎在SVG文件的XML结构中添加了一个名为clipPath的标记。这导致xlink在Webkit中被塑造成矩形，而不是我想要的路径。这并不能解决Webkit中的白色背景错误，但这无论如何都不是问题，因为我将SVG的不透明度设置为零。无论如何谢谢你！