Почему Safari переворачивает мои шаблоны фона SVG?

Question

У меня есть файл 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) Я вижу это:

Обратите внимание, что здесь линии обращаются вспять. Это потому, что кажется, что сафари по вертикали переворачивает любой шаблон, который я определяю для заполнения.

Я что-то упустил? Это ошибка?

Answer 1

Это ошибка. См.: https://bugs.webkit.org/show_bug.cgi?id=75741

В Safari (Mac) оно должно быть исправлено с помощью версии 5.1.5. На Mobile Safari он не кажется исправленным.

Попробуйте использовать агент пользователя sniffing * + <pattern patternTransform="scale(1,-1)" …>.

*) Функция обнаружения всегда лучше, чем UA нюхает, но я понятия не имею, как обнаружить эту ошибку.