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

Question

Safari 6.1.5 is not displaying a pattern in an SVG rectangle. Safari 6.1.5未在SVG矩形中显示图案。 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 displays an empty blue outline, while Firefox and Chrome show polka-dots inside it. Safari会显示一个空的蓝色轮廓，而Firefox和Chrome会在其中显示波尔卡圆点。 I have the same problem with the diagonal hatch pattern I'm using in the real thing. 我在实物中使用的对角阴影图案存在相同的问题。

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. 我实际上偶然发现了一个适用于此代码段但不适用于真实代码的奇怪解决方法：在所有三个浏览器上的url在白色/透明背景上显示紫色圆圈之后，将其none更改为yellow 。 Unfortunately, when I do that in my real application I get a yellow background and no pattern. 不幸的是，当我在实际应用程序中执行此操作时，我得到的背景是黄色且没有图案。

Answer 1

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. Safari浏览器可以做只是通过删除产生相同的结果，其他浏览器none在URL后。 (Possibly a bug in Safari; see other answer.) （可能是Safari中的错误；请参见其他答案。）

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. 经过更多的实验，我发现可以通过在标题中添加<base>元素来破坏更正的测试用例。 Presumably Safari doesn't resolve the url("#myid") correctly. 大概Safari无法正确解析url("#myid") 。 (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.) （此外，如果Firefox和Chrome浏览器出现在名为styles/style.css的文件中，它似乎也有不同的解决方案； Chrome显然使用主文档作为基础，Firefox显然在样式表中寻找{{defs}}。）

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: . 但是，如果我提供的校正后的测试用例与http://localhost:3000 ，那么Safari仍然可以正常工作，因此它不像file: vs. http:那样简单。 It must be something else, somewhere in the huge complex web app I've taken over developing. 在我已经接管开发的庞大而复杂的Web应用程序中的某处，一定是其他内容。 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. 我现在已经尝试了三遍，通过删除元素直到模式起作用来隔离问题（这就是我发现Firefox不喜欢从另一个文件夹定义样式的方式），但是我在隔离问题上没有运气使用Safari。

I've given up for now and taken a different approach to get the visual effect the designer wants. 我现在已经放弃了，而是采用了不同的方法来获得设计师想要的视觉效果。

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

问题描述

1 个解决方案

解决方案1
0 2014-08-30 06:54:40

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

问题描述

1 个解决方案

解决方案1 0 2014-08-30 06:54:40

解决方案1
0 2014-08-30 06:54:40