¿Por qué no puedo hacer referencia a un degradado lineal SVG definido en un archivo externo (paint server)?

Por favor, eche un vistazo a este Pen:

http://codepen.io/troywarr/pen/VYmbaa

Lo que estoy haciendo aquí es:

  • definir un símbolo SVG ( )
  • definir un gradiente lineal SVG ( )
  • usando el elemento para hacer referencia al símbolo SVG que he creado
  • en el CSS, definiendo dos clases:
    • external , que hace referencia al degradado lineal definido en este archivo .svg externo (haga clic con el botón derecho y vea la fuente)
    • internal , que hace referencia al degradado lineal definido en el HTML local (que, en mi opinión, es efectivamente idéntico al del archivo externo)

Como apliqué la clase internal al elemento en la parte inferior del ejemplo de HTML, se aplica el degradado y se muestra una marca de gradiente azul. Eso es lo que estoy buscando.

Pero, si cambia la clase internal a external en el ejemplo de HTML, la marca ya no estará visible:

http://codepen.io/troywarr/pen/vEymKX

Cuando veo la pestaña “Red” de Chrome Inspector, no veo que el navegador intente cargar el archivo SVG. ¿Hay algún problema con mi syntax o hay algo más que esté sucediendo aquí?

Al menos parece que estoy haciendo esto bien, basado en algunas referencias que he encontrado:

  • http://www.w3.org/TR/SVG/painting.html#SpecifyingPaint
  • http://www.w3.org/TR/SVG/linking.html#IRIReference
  • https://stackoverflow.com/a/7118142/167911

Pero, nada de lo que he intentado hasta ahora me ha permitido hacer referencia a un degradado lineal definido en un archivo .svg externo.

¡Gracias por cualquier ayuda!

Después de más investigaciones, parece que se trata de un problema de soporte del navegador. Ver:

Tristemente, me encontré con esta pregunta antes de publicar la mía, y pensé que seguramente, en 5-1 / 2 años, el soporte del navegador se habría puesto al día, pero ese no parece ser el caso.

A partir de 2015, aparentemente Firefox y Opera son los únicos dos navegadores que lo respaldan de manera sustancial.

De vuelta al tablero de dibujo …

Puede usar svg4everybody con la opción polyfill: true , insertará todos los símbolos externos en lugar de use tags. Pero causará la segunda carga svg.

Entonces puedes descargar svg usando una solicitud de Ajax y luego insertarla en la página que se esconde con los estilos.

  

En este caso:

/img/svg-sprite.svg – es tu ruta svg.

estilos de clase ocultos :

 .hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } 

Y tu código podría verse así:

  
    Intereting Posts