Por alguna razón uno de los SVGs que tengo en mi página web no se representará en iOS, Chrome o iOS Safari. Otro SVG yo uso para el logotipo principal se hace absolutamente bien y que utilizan el mismo código de barra de los nombres de archivo/rutas. El elemento hay en el inspector para el tamaño correcto y la anchura, pero la imagen en sí misma es inexistente. También hace bien en condiciones normales de navegadores, incluso cuando se reduzca a un móvil como resolución.

Aquí está el código para el SVG

 <div class="col-2 footer-logo">
     <a href="#" title="foo">
         <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 235 61">
              <image xlink:href="img/footer_logo.svg" src="img/footer_logo.png"      width="234" height="60"/>
         </svg>
     </a>
  </div>

Y el acompañamiento de la SECS

.footer-logo{
    padding-left: 8em;
    a{
        display: inline-block;
        width: 235px;
        height: 61px;
    }
}

@media screen and (max-width: 1140px){
    footer{

        .footer-logo{
            padding-left: 0;
            margin-top: 2em;
        }
    }
}

EDIT: de Pie de página código

<footer class="col-4">
<div class="container">
<nav class="col-4 inner-footer">
<div class="col-1 footer-links">
<h4>foo</h4>
<ul>
<li><a href="#">foo?</a></li>
<li><a href="#">foo?</a></li>
<li><a href="#">foo?</a></li>
<li><a href="#">foo?</a></li>
</ul>
</div>
<div class="col-1 footer-links">
<h4>foo</h4>
<ul>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
</ul>
</div>
<div class="col-1 footer-links">
<h4>foo</h4>
<ul>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
</ul>
</div>
<div class="col-1 footer-links">
<h4>foo</h4>
<ul>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
</ul>
</div>
</nav>
<hr class="col-4">
<div class="col-2 copyright">
<p>foo.</p>
<p><a href="#">foo</p>
</div>
<div class="col-2 footer-logo">
<a href="#" title="foo">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 235 61">
<image xlink:href="img/footer_logo.svg" src="img/footer_logo.png" width="234" height="60"/>
</svg>
</a>
</div>
</div>
</footer>
InformationsquelleAutor Alsh | 2014-07-09

2 Comentarios

  1. 1

    La Imagen SVG etiqueta no apoyo «src» como un atributo e incluyendo este es probablemente el desencadenamiento de comportamiento de retroceso en los navegadores de escritorio que están tratando de hacer esto como un HTML <img> etiqueta.

    Actualización: El OP se había olvidado de cerrar su <image> etiqueta, pero se ha corregido el error en su código publicados, por lo que no puede ver el problema original. Esta pregunta y la respuesta debe ser ignorado como ya no es válido para cualquier propósito (excepto, quizás, antropológica).

    • Pero este artículo de Chris Coyier estados es una técnica útil para funciones de css-tricks.com/svg-fallbacks yo uso la misma técnica en cada SVG en el sitio, ¿por qué sólo este tiro un wobbler? – Gracias por tomar su tiempo para intentar ayudar 🙂
    • Hmm…entonces lo que claramente no es 🙂 Puedes publicar el código fuente de su imagen SVG, a ver si hay algo extraño en la fuente?
    • La fuente es proporcionada en la pregunta original, a menos que te refieres a una versión en vivo en JSFiddle? 🙂
    • Me refería a la fuente de pie de página.svg – es posible que haya algo en el contenido de la imagen que está causando problemas
    • He añadido el pie de página de código para usted 🙂
    • Lo siento, debería haber sido más claro. No el código fuente HTML en el pie de página. El SVG fuente de footer_logo.svg.
    • Oh mi error! Ha sido un par de días, voy a agregar ahora para usted.
    • Bien, este es un pastebin con la fuente, parece que es un png que se ha guardado como un archivo svg, esto puede ser el problema? (Me estoy armando un sitio diseñado en illustrator se puede ver, hecha por un colega así que no tengo idea de lo que era verdaderamente un nativo de SVG como yo no había visto en la SVGs código fuente) – pastebin.com/LNp8BAPM
    • La imagen muestra bien para mí en iOS Safari. Creo que vamos a tener que reproducir esto en un codepen o jsfiddle para la depuración. No es sencillo..
    • Lo siento por no volver a este hilo, de hecho, me decidí mostrarlo como un .PNG en fin, yo no veo ninguna razón por qué no se visualiza como un SVG, pero de todas formas lo ordena ahora! Gracias por tomarse el tiempo para tratar y ayudar.
    • ¿Por qué la marca de Michael respuesta como la solución & entonces el estado que no soluciona tu problema? Esto todavía parece un tema no resuelto.

  2. 0

    El problema era que tenía un PNG incrustado/codificado dentro de ese SVG. La solución a solución sería abrir un programa como Adobe Illustrator y el uso de la «huella de la Imagen» que vectorizes ella.

    • Hola, esa no era la respuesta que faltaba un trailing </imagen> al final en vez de sólo />. El .PNG es un retroceso como se ha demostrado en CSS-Tricks css-tricks.com/svg-fallbacks. Gracias por tomarse el tiempo para tratar y ayudar, aunque! 🙂
    • Oh, ya veo. Mi mal, yo tuve un problema similar y que fue mi solución. Es bueno saber acerca de la reserva.

Dejar respuesta

Please enter your comment!
Please enter your name here