O padrão de preenchimento SVG funciona no Firefox e Chrome, mas não no Safari
O Safari 6.1.5 não está exibindo um padrão em um retângulo SVG. Finalmente simplifiquei esse caso de teste:
<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>
O Safari exibe um contorno azul vazio, enquanto o Firefox e o Chrome mostram bolinhas dentro dele. Eu tenho o mesmo problema com o padrão de hachura diagonal que estou usando na coisa real.
Na verdade, eu tropecei em uma solução alternativa estranha que funcionapara este trecho mas não para a coisa real: mudarnone parayellow depois deurl mostra círculos roxos em um plano de fundo branco / transparente nos três navegadores. Infelizmente, quando faço isso no meu aplicativo real, recebo um plano de fundo amarelo e sem padrão.