Home/ Questions/Q 7890537
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T06:22:48+00:00

I have a svg file that looks like this <?xml version=1.0 encoding=utf-8?> <svg version=1.1

  • 0

I have a svg file that looks like this

<?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>

In Chrome and Firefox it looks like this as expected:
in Chrome

Now in Safari(5.1.3) I see this:

Safari

Notice that here the lines are reversed. This is because it seems that safari vertically flips any pattern I define for the fill.

Am I missing something? Is this a bug?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s a bug. See: https://bugs.webkit.org/show_bug.cgi?id=75741

    On Safari (Mac) it should be fixed with Version 5.1.5. On Mobile Safari it doesn’t seem to be fixed.

    Try user agent sniffing* + <pattern patternTransform="scale(1,-1)" …>.

    *) Feature-detection is always better than UA sniffing, but I have no idea how to detect this bug.

    • 0