Safari

Question

我正在为当地乐队制作一个网站，他们想要一个带有轮廓文字的设计。我查找了如何做到这一点，发现透明填充和实线轮廓的唯一方法是使用SVG文本。我为他们构建了网站，它在Chrome / Firefox / Opera中运行良好，但Safari中存在许多问题。

该网站的最新版本可在此处获取：http://ewanroycroft.co.uk/mos/desk_new.html

首先，当您将鼠标悬停在第一页上的徽标的其中一个字母上时，它应该变为纯白色并播放声音。出于某种原因，Safari中的悬停区域低于字母本身，有什么方法可以强制它们回到正确的位置？

当您滚动时，徽标应该移动到页面顶部并变为纯白色，我这样做是通过淡出轮廓文本并淡化纯色文本。当实体徽标消失时，这样可以正常工作到页面的大约一半：

当您将鼠标悬停在其中一个链接上时，它们也应更改为纯白色。我这样做是通过交换纯文本的轮廓文本。这工作正常并且元素交换（我可以在检查器中看到），但由于某种原因，尽管我删除了display: none;属性，但实体链接没有填充因此仍然不可见：

最后，当您将鼠标悬停在角落的徽标上时，它应显示“SITE BY EWAN ROYCROFT”文本。这只是纯文本，而不是SVG。出于某种原因，它不会在Safari中显示。同样，我可以看到该元素位于检查器中的正确位置，display: none;属性已被删除，但仍然不可见：

如果有人有一些体面的SVG经验，或者知道可能导致这些问题的任何问题/错误/错误，那么我会非常感激，我已经尝试了很长时间才找到他们的路线而且完全失去了

提前感谢您的回复。

Answer 1

我将SVG中的文本转换为路径-解决了Safari中文本显示错误的问题（在我的情况下，文本的宽度比定义的短）。