Svg con imagen adentro no se muestra en safari

Dentro de mi sitio web, estoy incorporando algunos svgs. Todos parecen funcionar bien en Chrome, Firefox, IE (9+) y en Safari. Howvere tan pronto como se incluye una imagen en el svg, safari no representa la imagen.

Basado en el tema similar anterior, he intentado lo siguiente:

Los elementos SVG no se muestran en Safari : encerrando

 

etiqueta como esta

La imagen SVG no aparece en Safari . No encuentro esto muy útil, porque esto borra el aprt de svg.

No se puede procesar la imagen SVG en Safari : se agregó

en el encabezado.

Y más allá de eso, realmente no sé qué más probar. Quizás una cosa más interesante a tener en cuenta es que dentro de mi página, la imagen no se muestra, pero puedo abrir el archivo svg en safari (solo el archivo) y se renderizará correctamente. Además, después de que se abre en el navegador como un archivo, también se procesa dentro de la página. E incrustó la svg en la página con la etiqueta img.

  

Este es mi svg:

                       

He reducido la cadena de imagen de base64 para acortar el código. Completo svg se puede encontrar aquí .

ACTUALIZACIÓN: Para que quede claro, svg se muestra en el navegador (safari) pero falta la imagen (puedo ver solo el borde).

Parece que este error de WebKit es responsable del problema: https://bugs.webkit.org/show_bug.cgi?id=99677

La solución que utilizamos en nuestra aplicación es tener un script que encuentre todos los elementos img que muestren imágenes SVG y que agreguen elementos de object ocultos cargando los mismos SVG ( ).

La razón por la que funciona es porque la etiqueta del object carga correctamente las imágenes incrustadas en la caché de imágenes, de modo que sean visibles dentro de los archivos SVG cargados con las tags img .

La ventaja de este enfoque es que las imágenes se siguen mostrando con la etiqueta img , de modo que la solución alternativa se puede aplicar (y luego eliminar limpiamente cuando los navegadores finalmente se parchan) sin afectar el rest de la aplicación / sitio web.

La desventaja es la creación de una etiqueta de object adicional para cada imagen SVG.

Esta solución funciona para mí cuando se muestra una imagen SVG incrustada en Safari.

reemplazar

con

Parece que la respuesta de esta pregunta funciona: ¿Qué podría hacer que Safari salte clip-path AND mask con SVG? . Vea las instrucciones en el enlace de la respuesta.

Tienes que volver a crear la ruta de tu clip para que sea visible. Y la etiqueta no se inserta después de la etiqueta .

Aquí está el pequeño código modificado (se inserta un enlace a mi imagen, así que tendrá que cambiarlo):

       

Así que Anto Jurković señaló que hay algunos problemas conocidos con Safari y clipPath. Lo que le gusta a Safari es que no defina un polígono sino que lo ponga directamente en clippPath. También debe agrupar clipPath por separado.

Pero todavía no pude obtener https://stackoverflow.com/questions/20609997/svg-with-image-inside-is-not-showing-in-safari/svg para representar la imagen si utilicé la etiqueta img para https://stackoverflow.com/questions/20609997/svg-with-image-inside-is-not-showing-in-safari/svg . Así que al final lo he embebido así:

             

Puedo confirmar que esto se representa correctamente en el safari móvil (en ipad y iphone, Windows safari y mac safari – últimas versiones).

Entonces, para resumir … Tengo esta https://stackoverflow.com/questions/20609997/svg-with-image-inside-is-not-showing-in-safari/svgs en un archivo html separado y los renderizo cuando sea necesario.

Me encontré con este problema donde estaba usando Ajax para cargar la hoja de sprites https://stackoverflow.com/questions/20609997/svg-with-image-inside-is-not-showing-in-safari/svg en la página. Si tuviera una en la página antes de cargar la hoja de sprites, fallaría y no se resolvería una vez que la hoja de sprites estuviese disponible. Cualquier agregado al dom después de que se cargó la hoja de sprites estaba bien. Tuve que retrasar poner los artículos en el dom hasta que la hoja de sprites terminó de cargarse.

Esto solo afectó a IOS. El rest de navegadores no se preocuparon por el orden.