SVG fill pattern works on Firefox and Chrome but n

Safari 6.1.5 is not displaying a pattern in an SVG rectangle. I've finally simplified it down to this test case:

<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 displays an empty blue outline, while Firefox and Chrome show polka-dots inside it. I have the same problem with the diagonal hatch pattern I'm using in the real thing.

I actually stumbled on a strange workaround that works for this snippet but not for the real thing: changing none to yellow after the url shows purple circles on a white/transparent background on all three browsers. Unfortunately, when I do that in my real application I get a yellow background and no pattern.

I now think my test case is a red herring; it fails for a different reason than my real web site fails to show the pattern. Safari can be made to produce the same result as the other browsers just by deleting the none after the URL. (Possibly a bug in Safari; see other answer.)

Unfortunately, that just means I failed to reduce my real problem to a small test case, because the real thing still doesn't work. After more experimentation, I found that I can break the corrected test case by adding a <base> element to the header. Presumably Safari doesn't resolve the url("#myid") correctly. (Also, Firefox and Chrome seem to resolve it differently if it appears in a file called styles/style.css; Chrome apparently uses the main document as the base, Firefox apparently looks for the {{defs}} in the style sheet.)

And yet Safari does still work if I serve the same the corrected test case as http://localhost:3000, so it's not as simple as file: vs. http:. It must be something else, somewhere in the huge complex web app I've taken over developing. I've now tried three times to isolate the problem by deleting elements until the pattern works (which is how I discovered that Firefox doesn't like the style being defined from another folder), but I've had no luck in isolating the problem with Safari.

I've given up for now and taken a different approach to get the visual effect the designer wants.