Incluir archivo SVG en SVG

Question

Tengo un linearGradient en la sección defs de mi archivo SVG, y lo menciono con fill = "url (#myGradientName)". Eso funciona bien hasta ahora.

Creo que debería ser capaz de poner toda mi sección de defs en su propio archivo SVG, y luego solo hacer referencia a eso desde todas mis imágenes SVG. Es decir, algo así como:

styles.svg:

<svg xmlns=...> 
    <defs> 
    <linearGradient id="myGradient" ...> 
    </linearGradient> 
    </defs> 
</svg> 

image.svg:

<svg xmlns=...> 
    <rect width="100" height="100" fill="styles.svg#myGradient"/> 
</svg> 

Pero me parece que no puede conseguir el estilo a aplicar. ¿Tengo una sintaxis incorrecta para los ID externos a este archivo (styles.svg # myGradient)? ¿Debo incluir explícitamente el archivo primero de alguna manera?

He estado vertiendo sobre la especificación de SVG y parece que esto debería ser posible, pero ninguno de los ejemplos realmente muestra que se está haciendo.

Editar: El FOP FAQ sugiere que la sintaxis correcta es fill = "url (grad.svg # PurpleToWhite)", pero eso no funciona en Gecko o Webkit. ¿Es correcto y nadie lo apoya, o estoy haciendo algo más mal?

Answer 1

Parece que esto solo es compatible con Firefox 3.1.

Answer 2

En realidad, las preguntas frecuentes de FOP son correctas, la sintaxis correcta abarca el URI con url(...). Acabo de consultar con mi Firefox, y se encarga de llenar solo con url() circundante. Sería un error en Safari u Opera, si lo manejara de manera diferente.

Casualmente presenté un similar question, pero con un éxito igualmente pequeño.

Saludos,

Answer 3

Sí es necesario decir fill="url(styles.svg#myGradient)". Eso funciona en Firefox 4 beta 6 y me imagino que funcionó en Firefox 3.5. Pero Chrome (7.0.517.41 beta) y la versión beta de IE9 (9.0.7930.16406) aún no son compatibles. Parece que ambos buscan #myGradient en el documento actual en lugar de ir a la URL especificada. Bruto.

Éstos son los archivos completos que he utilizado para probar esto:

styles.svg

<svg xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
    <linearGradient id="myGradient"> 
     <stop offset="0" stop-color="red" /> 
     <stop offset="1" stop-color="black" /> 
    </linearGradient> 
    </defs> 
</svg> 

image.svg

<svg xmlns="http://www.w3.org/2000/svg"> 
    <rect width="100" height="100" fill="url(styles.svg#myGradient)"/> 
</svg>