html - and - Svg con imagen adentro no se muestra en safari

svg html

Question

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 <image> no se muestran en Safari : encerrando

 <use>

etiqueta como esta <use></use>

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ó

<meta http-equiv="Content-Type" content="application/xhtml+xml"> 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.

<img src="mysvg.svg" class="center-block"/>

Este es mi svg:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve">
<g>
    <defs>
        <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414      "/>
    </defs>
    <clipPath id="SVGID_2_">
        <use xlink:href="#SVGID_1_"  overflow="visible"></use>
    </clipPath>
    <g id="DSC_x5F_0112-2.psd" clip-path="url(#SVGID_2_)">
        <g id="DSC_x5F_0112-2.psd_1_" enable-background="new    ">

                <image overflow="visible" width="338" height="532" id="DSC_x5F_0112-2" xlink:href="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/4QNhaHR0cDov
.....SLKPF+7j+acOZPZjmsw4Q0f0L/6k1fu3WFvY/wDEB5o0d7H7/wD7SPFgPzVE54J9/wBI/qez5vei
r/fdeaS//9k=" transform="matrix(0.9818 0 0 0.9818 -2.7197 -11.064)">
            </image>
        </g>
    </g>
</g>
<g>
    <path fill="#FFFFFF" d="M164,328.001L0,164.002L164,0.001l164,164.001L164,328.001z M1.414,164.002L164,326.587l162.586-162.585
        L164,1.415L1.414,164.002z"/>
</g>
</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).

Answer 1

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 svg para representar la imagen si utilicé la etiqueta img para svg - <img src="svg"/> . Así que al final lo he embebido así:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve">
<g>
    <clipPath id="SVGID_2_">
        <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414      "/>
    </clipPath>
</g>
<image clip-path="url(#SVGID_2_)" overflow="visible" width="338" height="532" id="DSC_x5F_0112-2" xlink:href="data:image/jpeg;base64,/9j/.....r/fdeaS//9k=">
</image>
<g>
    <path fill="#FFFFFF" d="M164,328.001L0,164.002L164,0.001l164,164.001L164,328.001z M1.414,164.002L164,326.587l162.586-162.585
        L164,1.415L1.414,164.002z"/>
</g>
</svg>

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 svgs en un archivo html separado y los renderizo cuando sea necesario.

Answer 2

Me encontré con este problema donde estaba usando Ajax para cargar la hoja de sprites 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 resto de navegadores no se preocuparon por el orden.

Answer 3

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 ( <object style="position: fixed; width: 0; height: 0;" data="image.svg" type="image/svg+xml"></object> ).

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 etiquetas img .

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

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

Answer 4

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 </clippath> no se inserta después de la etiqueta </image> .

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

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve" >
<g>
    <clipPath id="SVGID_2_">
        <!--use xlink:href="#SVGID_1_"  overflow="visible"></use-->
        <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414" />
    </clipPath>

    <defs>
        <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414"/>
    </defs>
</g>

<image clip-path=''url(#SVGID_2_)'' overflow="visible" width="338" height="532" id="DSC_x5F_0112-2" xlink:href="images/banner_03.jpg" transform="matrix(0.9818 0 0 0.9818 -2.7197 -11.064)">
</image>

<g>
    <path fill="#FFFFFF"  d="M164,328.001L0,164.002L164,0.001l164,164.001L164,328.001z M1.414,164.002L164,326.587l162.586-162.585
        L164,1.415L1.414,164.002z"/>
</g>
</svg>

Answer 5

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

reemplazar

<img src="image.svg">

con

<object data="image.svg" type="image/svg+xml"></object>