SVG填充模式适用于Firefox和Chrome，但不适用于Safari [英] SVG fill pattern works on Firefox and Chrome but not Safari
问题描述
Safari 6.1.5不在SVG矩形中显示模式。我最后简化了这个测试用例：
Safari 6.1.5 is not displaying a pattern in an SVG rectangle. I've finally simplified it down to this test case:
<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在其中显示圆点。
Safari displays an empty blue outline, while Firefox and Chrome show polka-dots inside it. I have the same problem with the diagonal hatch pattern I'm using in the real thing.
我实际上偶然发现了一个奇怪的工作区，该工作区在这个代码片段 / em>但不是真正的事情： url 之后将无改为黄 / code>在所有三个浏览器的白色/透明背景上显示紫色圆圈。不幸的是，当我在我的实际应用中，我得到一个黄色的背景，没有模式。
I actually stumbled on a strange workaround that works for this snippet but not for the real thing: changing none to yellow after the url shows purple circles on a white/transparent background on all three browsers. Unfortunately, when I do that in my real application I get a yellow background and no pattern.
推荐答案
是红鲱鱼;它失败了一个不同的原因，我的真正的网站无法显示模式。 Safari可以通过删除URL后的 none 来产生与其他浏览器相同的结果。 （可能是Safari中的错误;请参阅其他答案。）
I now think my test case is a red herring; it fails for a different reason than my real web site fails to show the pattern. Safari can be made to produce the same result as the other browsers just by deleting the none after the URL. (Possibly a bug in Safari; see other answer.)
不幸的是，这意味着我没能将我的真正的问题减少到一个小的测试用例，不工作。经过更多的实验，我发现我可以通过添加一个< base> 元素来打破校正的测试用例。假设Safari不能正确解析 url（＃myid）。 （另外，如果Firefox和Chrome似乎在一个名为 styles / style.css 的文件中出现，Chrome看起来会有不同的解决方式; Chrome显然使用主文档作为基础，对于样式表中的{{defs}}。）
Unfortunately, that just means I failed to reduce my real problem to a small test case, because the real thing still doesn't work. After more experimentation, I found that I can break the corrected test case by adding a <base> element to the header. Presumably Safari doesn't resolve the url("#myid") correctly. (Also, Firefox and Chrome seem to resolve it differently if it appears in a file called styles/style.css; Chrome apparently uses the main document as the base, Firefox apparently looks for the {{defs}} in the style sheet.)
然而，Safari仍然可以工作，如果我提供的校正测试用例与 http：// localhost：3000 ，因此它不像文件那样简单：与 http：。它必须是别的东西，在我已经接管开发的巨大的复杂网络应用程序的某个地方。我现在尝试三次通过删除元素，直到模式工作（这是我怎么发现，Firefox不喜欢从另一个文件夹定义的风格）隔离问题，但我没有运气隔离问题
And yet Safari does still work if I serve the same the corrected test case as http://localhost:3000, so it's not as simple as file: vs. http:. It must be something else, somewhere in the huge complex web app I've taken over developing. I've now tried three times to isolate the problem by deleting elements until the pattern works (which is how I discovered that Firefox doesn't like the style being defined from another folder), but I've had no luck in isolating the problem with Safari.
我已经放弃了，采取了不同的方法来获得设计师想要的视觉效果。
I've given up for now and taken a different approach to get the visual effect the designer wants.
这篇关于SVG填充模式适用于Firefox和Chrome，但不适用于Safari的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
