SVG 填充模式适用于 Firefox 和 Chrome，但不适用于 Safari答案

【问题标题】：SVG fill pattern works on Firefox and Chrome but not SafariSVG 填充模式适用于 Firefox 和 Chrome，但不适用于 Safari
【发布时间】：2014-10-24 00:54:30
【问题描述】：

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 在其中显示圆点。我在实物中使用的对角线填充图案也有同样的问题。

我实际上偶然发现了一个奇怪的解决方法，适用于这个 sn-p，但不适用于真实的东西：在 url 之后将 none 更改为 yellow 在白色上显示紫色圆圈/所有三个浏览器的透明背景。不幸的是，当我在实际应用程序中这样做时，我得到了黄色背景并且没有图案。

【问题讨论】：

在<svg>元素内移动样式标签有帮助吗？
在svg 元素中移动style 元素在这三个浏览器中的任何一个上都没有任何区别。

标签： html css svg safari

【解决方案1】：

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

不幸的是，这只是意味着我未能将我的真正问题简化为一个小测试用例，因为真正的问题仍然无法正常工作。经过更多的实验，我发现我可以通过在标题中添加<base> 元素来破坏更正的测试用例。大概 Safari 无法正确解析 url("#myid")。（此外，如果它出现在一个名为 styles/style.css 的文件中，Firefox 和 Chrome 似乎会以不同的方式解决它；Chrome 显然使用主文档作为基础，Firefox 显然会在样式表中查找 {{defs}}。）

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

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

【讨论】：

Chrome 使用主文档是一个长期存在的错误。火狐是正确的。