Having an issue with Safari 6.1.5 not displaying a pattern in an SVG rectangle. After simplifying the code, here is the 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>
In Safari, only an empty blue outline appears while Firefox and Chrome display polka-dots inside it. The same problem occurs with other patterns used in the actual project.
A workaround was found that shows purple circles on a white background when changing none to yellow after the url, but this does not work for the real application where it results in a yellow background with no pattern.