为什么Safari会翻转我的SVG背景模式？

2023年5月3日 204次阅读

我有一个看起来像这样的svg文件

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1"
 xmlns="http://www.w3.org/2000/svg" x="0px" y="0px">
<defs>
<pattern id="pat" patternUnits="userSpaceOnUse" width="3px" height="3px">
    <rect y="2" width="1" height="1" fill-opacity="0.2" />
    <rect x="1" y="1" width="1" height="1" fill-opacity="0.2"/>
    <rect x="2" width="1" height="1" fill-opacity="0.2"/>
</pattern>
</defs>
<rect fill="url(#pat)" height="148" width="259" y="106" x="109" stroke="#000000" />
</svg>

在Chrome和Firefox中,它看起来像预期的那样：

现在在Safari(5.1.3)中我看到了：

请注意,这里的线条是相反的.这是因为似乎safari垂直翻转我为填充定义的任何模式.

我错过了什么吗？这是一个错误吗？

最佳答案 这是一个错误.见：
https://bugs.webkit.org/show_bug.cgi?id=75741

在Safari(Mac)上,应该使用版本5.1.5进行修复.在Mobile Safari上,它似乎没有修复.

尝试用户代理嗅探*< pattern patternTransform =“scale(1,-1)”…>.

*)特征检测总是比UA嗅探更好,但我不知道如何检测这个bug.

点赞