Fondo-tamaño con SVG aplastado en IE9-10

Agregar un ancho y un alto al SVG, como dijo mbxtr, casi funcionó para mí. Necesitaba agregar preserveAspectRatio="none slice" también para que funcione responsablemente en IE.

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, incluyendo IE8, 9 y 10 (probablemente 11, pero no lo probé).

Para mí estas 3 correcciones ayudaron:

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

Tuve este problema y descubrí que eliminar el height y width dentro del código para el svg PERO mantener el viewBox puede resolver el problema.

Recomiendo usar un sitio compilador como: https://jakearchibald.github.io/svgomg / y configurando la opción a "preferir viewBox sobre alto 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 importa los svg en tu hoja de estilos usando ur> data uri: ... ejemplo:

Background-image: data-uri ('image / svg + xml; charset = UTF-8', 'where/your / svg / is / located');

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).

Habíamos creado SVG en Illustrator CC, pero ejecutarlos a través del optimizador SVG de Peter Collingridge para eliminar todo el cruft innecesario hizo el truco. http://petercollingridge.appspot.com/svg-optimiser

Probé la solución de @ mbxtr

Asegúrese de que su SVG tiene un ancho y un alto especificados. Si lo está generando desde Illustrator, asegúrese de que el cuadro" Sensible " esté desactivado, ya que esta opción elimina el ancho y la altura.

Que todavía no funciona para mí en Windows Chrome e IE. Estaba exportando un icono de fuente, así que si tienes una fuente, asegúrate de exportarla como:

• "fuente: convertir a contornos"
• y "responsive" es false

También desmarcé "minificar" por si acaso...

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 (altura original=1050) añadir directamente a sí mismo archivo svg Preservespectratio = "none" height = "2100"