Safari 6.1.5 未在 SVG 矩形中显示图案。我最终将其简化为这个测试用例：
<html>
<head>
<style>
.patterned { fill: url("#myid") none; stroke:blue}
</style>
</head>
<body>
<svg width="2880" height="592">
<defs>
<pattern id="myid" patternunits="userSpaceOnUse" x="0" y="0" width="20" height="20">
<circle r="10" cx=12 cy=10 fill="purple">
</pattern>
</defs>
<rect class="patterned" height="27" width="58">
</svg>
</body>
</html>
Safari 会显示一个空的蓝色轮廓，而 Firefox 和 Chrome 会在其中显示圆点。我在实际应用中使用的对角填充图案也有同样的问题。
我实际上偶然发现了一种有效的奇怪解决方法对于这个片段但不是为了真正的事情：改变none to yellow之后url在所有三个浏览器上显示白色/透明背景上的紫色圆圈。不幸的是，当我在实际应用程序中这样做时，我得到黄色背景并且没有图案。
我现在认为我的测试用例是一个转移注意力的事情；它失败的原因与我的真实网站未能显示该模式的原因不同。只需删除 Safari 即可产生与其他浏览器相同的结果none在网址之后。 （可能是 Safari 中的错误；请参阅其他答案。）
不幸的是，这只是意味着我未能将真正的问题简化为一个小测试用例，因为真正的问题仍然不起作用。经过更多的实验，我发现我可以通过添加一个来破坏更正的测试用例<base>元素到标题。大概 Safari 无法解决url("#myid")正确。 （此外，如果它出现在名为的文件中，Firefox 和 Chrome 似乎会以不同的方式解决它styles/style.css; Chrome 显然使用主文档作为基础，Firefox 显然在样式表中查找 {{defs}}。）
然而，如果我提供与以下相同的更正测试用例，Safari 仍然可以工作http://localhost:3000，所以它并不那么简单file: vs. http:。它一定是别的东西，在我接手开发的庞大复杂的网络应用程序中的某个地方。我现在已经尝试了三次通过删除元素来隔离问题，直到模式起作用（这就是我发现 Firefox 不喜欢从另一个文件夹定义的样式的方式），但我没有运气隔离问题与 Safari 浏览器。
我暂时放弃了，采取了不同的方法来获得设计师想要的视觉效果。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
