Background-size con SVG aplastado en IE9-10

Tengo un div conjunto con una imagen de fondo:

<div>Play Video</div>

con el siguiente CSS:

div {
background-image: url('icon.png');
background-image: url('icon.svg'), none;
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: 90% 50%;
padding: 20px;
width: 150px;
}

El tamaño del fondo es respetado en Firefox, Safari y Chrome. En IE8, el SVG es reemplazado por el archivo PNG. Sin embargo, en IE9 y IE10, el archivo SVG es drásticamente de tamaño hacia abajo. El problema parece estar ligada a la anchura y la altura de la div. Si puedo añadir una altura de 150px, el formato SVG se procesan correctamente. Si me hacen más pequeños (es decir, 100px) en el gráfico comienza a encogerse.

Alguien ha encontrado una manera de solucionar este problema en el Explorador? Es allí una manera de decir, es decir, a utilizar el fondo de tamaño valor independientemente de la anchura y la altura del div?

  • Buena pregunta, esto ha sucedido muchas veces.
InformationsquelleAutor Julesfrog | 2014-02-17

9 Kommentare

  1. 162

    Asegúrese de que su SVG tiene un width y height especificado. Si estás generando desde Illustrator, asegúrese de que la «capacidad de respuesta», en la casilla no está marcada esta opción elimina la anchura y la altura.

    • yo tenía el mismo problema. así que abrió el svg con un editor. también como mbxtr, illustrator generar svgs sin la anchura, la altura de propiedades en <svg> etiqueta. Su puede volver a crear el archivo SVG aquí
    • Esto lo hizo por mí. Abrí el SVG en mi editor y copia/pega los dos últimos valores de la viewBox propiedad en propiedades width y height. Así que, antes de: <svg viewBox=»0 0 800 150″> y después: <svg viewBox=»0 0 800 150″ width=»800″ height=»150″>
    • Esta es la solución. Yo estaba teniendo problemas, usando SVG w/ background-position y ver las diferencias posicionales entre IE, FF y Chrome. Después de agregar una altura/anchura a mi SVG todos los tres se muestran correctamente.
    • Gracias mbxtr. Que hizo el truco. Siento responder tan tarde. Me había mudado a un proyecto diferente y acabo de volver a esta.
    • Mi problema es necesario que me quite el SVG código de valores de altura y anchura por lo que vale.
    • YMMV supongo, la adición de atributos de anchura y altura no me funciona. IE10 todavía no parece saber lo de la «tapa» es decir, que actúa como «contener».
    • En el caso de que usted quiere que su SVG para ser sensible a su contenedor, esto no ayuda. No he tenido la suerte de encontrar una solución perfecta para el uso de SVG como de fondo, que funciona en todos los navegadores, por lo que caen de nuevo a png de fondo cuando el contenedor es mayor que el SVG en sí.
    • Justo lo que estaba buscando. Gracias!
    • Así que no hay esperanza, si yo quiero que dentro de un sensible contenedor??
    • Gracias! Esta solucionado mi problema. Yo estaba usando un :después de pseudo elemento con un svg patrón.
    • la vida ahorro de tiempo…
    • ya esta resuelto para mí en IE, con un SVG como imagen de fondo en una capacidad de respuesta contenedor, con background-size conjunto para «cubrir».
    • la respuesta perfecta , un millón de gracias

  2. 13

    La adición de una anchura y altura para el SVG como mbxtr dijo casi trabajó para mí. Tuve que agregar preserveAspectRatio="none slice" así que para que funcione con alternación en el IE.

    • La adición de preserveAspectRatio="none slice" a la <svg> etiqueta en el documento svg acaba de resolver este problema para mí! Gracias por tu sugerencia.
    • Para mí sólo preserveAspectRatio="xMinYMid" trabajado
    • Gran respuesta! Funciona, gracias!
  3. 4

    Para mí, estos 3 corrige ayudado:

    • Si es posible establecer el fondo-posición de «centro»
    • De fondo-tamaño del conjunto de ambos valores, «100% auto» no hará el truco, por lo que el uso de «100% 100%»
    • Si es que aún no te ayudan a modificar el último de los valores «viewBox» atributo de la SVG sí mismo y hacer un pixel más alta y ancha que la anchura y la altura de la SVG. Esto reduce el SVG un poco, pero se detiene, es decir, desde el corte de apagado – y el de menor tamaño no se notó en absoluto.
  4. 3

    Bien, no parece que haya una solución. Sorpresa, sorpresa. Es es decir, después de todo. Terminé usando el siguiente código:

    div {
    padding: 20px;
    width: 150px;
    position: relative;
    }
    
    div:after {
    position: absolute;
    content: "";
    width: 40px;
    height: 40px;
    top: 50%;
    right: 30px;
    margin-top: -20px;
    background-image: url('icon.png');
    background-image: url('icon.svg'), none;
    }

    Me gustó el limpiador versión mejor, pero este hack funciona en todos los navegadores modernos, incluyendo IE8, 9, y 10 (probablemente 11 pero no hice la prueba).

    • ¿cuál es el hack en ella? por favor puede explicar?
    • Creo que es el uso de iconos diferentes para los distintos navegadores.. No apto para todo el mundo
  5. 2

    Tuve este problema y he encontrado que, o bien la eliminación de la altura y ancho dentro del código para el svg, PERO manteniendo el viewBox puede resolver el problema.

    Recomiendo el uso de un compilador sitio como : https://jakearchibald.github.io/svgomg/
    y ajuste de la opción a «prefieren viewBox sobre la altura y el ancho»

    TAMBIÉN si nada de esto funciona, en Illustrator trate de aplicar un fondo cuadrado alrededor de la imagen svg, pero dejando suficiente relleno alrededor de los bordes.

    Y de importación de svg en su hoja de estilos utilizando –> datos uri: …
    ejemplo:

    background-image: data-uri(‘image/svg+xml;charset=UTF-8′,’ donde/su/svg/es/encuentra’);

    • Que es un sitio increíble. Gracias por la participación.
    • herramienta realmente agradable !
  6. 0

    Hemos tenido un problema similar con SVG imágenes de fondo que no fuera el sitio completo de un elemento de contención (como la lupa en el lado izquierdo de una búsqueda de entrada).

    Que habíamos creado a cabo SVGs en Illustrator CC, pero les ejecuta a través de Pedro Collingridge es SVG optimizador de sitios para sacar todo el innecesario resto hizo el truco. http://petercollingridge.appspot.com/svg-optimiser

  7. 0

    Traté de @mbxtr la solución de

    Asegúrese de que su SVG tiene una anchura y altura especificadas. Si estás generando desde Illustrator, asegúrese de que la «capacidad de respuesta», en la casilla no está marcada esta opción elimina la anchura y la altura.

    Que aún no funciona para mí en windows, Chrome e IE.
    Yo estaba exportando una fuente icono, así que si usted tiene una fuente, asegúrese de exportación como:

    • «fuente: convertir en contornos»
    • y «sensible» es falsa

    Yo también unchecked «minify» sólo en caso de…

  8. 0

    1. javascript

        drips.style.top = -dripsTop + "px";
     var browser = window.navigator.userAgent;
      if (browser.indexOf("Trident") > 0) {
         $(".flow_space").css({"background":"url(../img/space2-ie.svg) no-repeat", "background-size":"100%"});
      }

    1. svg (original height=1050)
      agregar directamente a sí mismo archivo svg
      preserveAspectRatio=»none» height=»2100″
  9. 0

    Svg imagen de fondo de tamaño de render mismo en IE y Chrome el uso de estas propiedades

    background: #ffffff url("images/calendar.svg") no-repeat;
    border: 1px solid #dddddd;
    float: left;
    margin: 0;
    overflow: hidden;
    background-size:15px 15px;

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea