Question

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显示紫色后将yellow更改为url在所有三个浏览器上的白色/透明背景上的圆圈。不幸的是，当我在我的实际应用程序中执行此操作时，我得到一个黄色背景，没有模式。

Answer 1

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

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

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

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

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

1 个答案: