SVG填充图案适用于Firefox和Chrome，但不适用于Safari浏览器

Safari 6.1.5不在SVG矩形中显示图案。我终于简化下来到这个测试用例：SVG填充图案适用于Firefox和Chrome，但不适用于Safari浏览器

<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显示里面波尔卡圆点。我在现实中使用的对角线孵化模式也有同样的问题。

我迷迷糊糊竟在一个陌生的解决方法，对于这个片段而不是真实的东西的工作：在url后改变none到yellow显示了在所有三个浏览器白色/透明背景紫色圆圈。不幸的是，当我在真正的应用程序中这样做时，我会看到一个黄色的背景，没有任何图案

来源

2014-08-30 Bob Kanefsky

在' 2014-08-30 06:41:01

在'svg'元素里面移动'style'元素在这三种浏览器中都没有任何区别。 – 2014-09-09 19:08:21

我现在认为我的测试用例是红鲱鱼;它失败的原因不同于我的真实网站未能显示模式。通过在URL后面删除none，可以使Safari产生与其他浏览器相同的结果。（可能是Safari中的一个bug;请参阅其他答案。）

不幸的是，这只意味着我没有将我的真正问题减少到一个小测试用例，因为真实的东西仍然不起作用。经过更多的实验后，我发现我可以通过在标题中添加一个<base>元素来打破更正的测试用例。据推测，Safari无法正确解析url("#myid")。（另外，Firefox和Chrome如果出现在名为styles/style.css的文件中似乎有所不同; Chrome显然使用主文档作为基础，Firefox显然是在样式表中寻找{{defs}}。）

然而，如果我服务的修正测试用例与http://localhost:3000相同，Safari仍然可以工作，因此它不像file:与http:一样简单。它必须是别的东西，在我开发的巨大复杂的Web应用程序中的某个地方。我现在已经尝试了三次，通过删除元素直到模式工作（这是我发现Firefox不喜欢从另一个文件夹定义的样式）来隔离问题，但是我没有隔离问题的运气与Safari。

我已经放弃了现在，采取了不同的方法来获得设计师想要的视觉效果。

来源

2014-08-30 06:54:40

Chrome使用主文档是一个长期存在的错误。 Firefox是正确的。 – 2014-08-30 07:26:00

SVG填充图案适用于Firefox和Chrome，但不适用于Safari浏览器

回答

相关问题