css - Tamaño de fondo con SVG squished en IE9-10

internet-explorer-9 internet-explorer-10

Question

Tengo un juego de div 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 de fondo se respeta en Firefox, Safari y Chrome. En IE8, el SVG se reemplaza por el archivo PNG. Sin embargo, en IE9 e IE10, el archivo SVG se reduce drásticamente. El problema parece estar relacionado con el ancho y alto del div. Si agrego una altura de 150px, el SVG se renderiza correctamente. Si lo hago más pequeño (es decir, 100 px), el gráfico comienza a reducirse.

¿Alguien ha encontrado la manera de solucionar este problema en Explorer? ¿Hay alguna manera de decirle a IE que use el valor de fondo independientemente del ancho y alto del div?

Answer 1

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%"});
  }

2. svg (altura original = 1050) agregar directamente a sí mismo archivo svg preserveAspectRatio = "none" height = "2100"

Answer 2

Agregar un ancho y alto al SVG como mbxtr dijo que casi funcionó para mí. Necesitaba agregar preserveAspectRatio="none slice" para que funcione de manera responsable en IE.

Answer 3

Asegúrese de que su SVG tenga un width y una height especificados. Si lo está generando desde Illustrator, asegúrese de que la casilla "Receptivo" esté desmarcada, ya que esta opción elimina el ancho y el alto.

Answer 4

Bueno, no parece que haya una solución. Sorpresa sorpresa. Es IE 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ó más la versión más limpia, pero este truco funciona en todos los navegadores modernos, incluidos IE8, 9 y 10 (probablemente 11 pero no hice la prueba).

Answer 5

Intenté la solución de @mbxtr

Asegúrese de que su SVG tenga un ancho y una altura especificados. Si lo está generando desde Illustrator, asegúrese de que la casilla "Receptivo" esté desmarcada, ya que esta opción elimina el ancho y el alto.

Eso todavía no funcionó para mí en Windows Chrome e IE. Estaba exportando un ícono de fuente, así que si tienes una fuente, asegúrate de exportarla como sigue:

• "font: convertir a contornos"
• y "receptivo" es falso

También desmarqué "minify" por si acaso ...

Answer 6

Para mí, estas 3 soluciones me ayudaron:

• Si es posible, establezca la posición de fondo en "centro"
• Para el tamaño de fondo establecer ambos valores, "100% automático" no hará el truco, a fin de utilizar "100% 100%"
• Si eso todavía no ayuda a alterar el último valor del atributo "viewBox" del SVG mismo y hacerlo un píxel más ancho y más alto que el ancho y el alto del SVG. Esto encoge un poco el SVG, pero evita que IE lo corte, y el tamaño más pequeño no se notará en absoluto.

Answer 7

Tuve este problema y encontré que eliminar el alto y el ancho dentro del código para el svg PERO mantener el viewBox puede resolver el problema.

Recomiendo usar un sitio de compilación como: https://jakearchibald.github.io/svgomg/ y establecer la opción de "preferir viewBox sobre altura y ancho"

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

E importar los svg en su hoja de estilo usando -> datos uri: ... ejemplo:

background-image: data-uri (''image / svg + xml; charset = UTF-8'', ''donde / su / svg / es / ubicado'');

Answer 8

Tuvimos un problema similar con las imágenes de fondo SVG que no eran el sitio completo de un elemento contenedor (como la lupa en el lado izquierdo de una entrada de búsqueda).

Creamos SVG en Illustrator CC, pero ejecutarlos a través del optimizador SVG de Peter Collingridge para eliminar todo el material innecesario funcionó. http://petercollingridge.appspot.com/svg-optimiser