Patrón de relleno de SVG usando una referencia a una definición en un archivo

El siguiente bash de crear un rectángulo con un relleno de patrón no parece funcionar en Safari 6.1, Firefox 30 o Chrome 36, aunque la especificación W3 parece indicar que puedo usar una referencia IRI no local , incluyendo un uno relativo, como fill="url(localURL.svg#MyId)" .

test.html

    .patterned { fill: url("patterns.svg#polkadot"); stroke: lime; stroke-width: 5px}         

patterns.svg

        

Safari y Chrome muestran un rectángulo con el contorno verde lleno de negro. Firefox muestra un rectángulo verde o vacío lleno de blanco. Ninguno de ellos muestra el patrón de círculos morados.


Estoy intentando este enfoque porque no pude obtener un patrón de relleno SVG para trabajar en Safari en el proyecto Backbone + JQuery + D3 en el que estoy trabajando usando el método más común, una defs línea con fill="url(#MyId)" . No pude conseguir que ese enfoque fallara como un simple caso de prueba, pensé que sí , pero resultó ser un error de Safari diferente con una solución obvia. Al menos ese enfoque funcionó en algunos navegadores.

Tienes una carga de errores de syntax en tu archivo patterns.svg. Faltan “caracteres de valores de atributo redondos, un elemento de círculo no cerrado, unidades de patrones en lugar de unidades de patrones.

SVG standalone debe ser XML válido, no es tan tolerante como html y es sensible a las mayúsculas y minúsculas también en los nombres de los atributos. Si cargó directamente el archivo patterns.svg, los navegadores le dirían todas estas cosas.

Con todo esto fijo (como a continuación), esto funciona en Firefox. No estoy seguro de que Chrome / Webkit haya implementado esto todavía.