Почему 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) Iсм. это:

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

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

Answer 1

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

В Safari (Mac) это должно быть исправлено в Версии 5.1.5.В Mobile Safari это, похоже, не исправлено.

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

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