css - images - SVG en proporciones de elemento img no respetadas en ie9
svg fallback (5)
De alguna manera este scss arregló mi problema.
ul {
li {
list-style: none;
margin: 0;
padding: 0;
display: inline;
img {
height: 20px;
margin: 0 10px;
display: inline-block;
}
}
}
En realidad estaba haciendo una lista centrada de logotipos para mi pie de página y estaba teniendo problemas de ancho. Normalmente creo un bloque en línea con un elemento de bloque dentro de él. Crear un elemento en línea con un elemento de bloque en línea funcionó para mí. Esta es una implementación específica en la que apareció el error y realmente no resuelve cada error, pero espero que ayude a alguien a leer esto.
CSS:
img{
max-height:30px;
}
HTML:
<img src="foo.svg" />
Estoy buscando esta imagen svg para escalar proporcionalmente a una altura máxima de 30 píxeles de alto. Las dimensiones naturales de svg son 200px por 200px. Funciona muy bien en FF y Chrome (30x30) pero en IE9 la imagen es 30x200. Ahora aquí está el pateador. Solo ocurre con ciertos archivos SVG, otros svgs escalan correctamente.
Parece que la diferencia es que uno está hecho de polígonos, y el otro está hecho de caminos.
no escala correctamente:
http://www.radiantinteractive.com/rs/images/allies/other/crocs.svg
escala correctamente:
http://www.radiantinteractive.com/rs/images/allies/technologyLogos/groovy.svg
¿Alguna idea sobre por qué sucede esto o cómo puedo obtener la primera para escalar proporcionalmente en ie9?
Para arreglarlo en ie9 y no para quedarse con esto. No sé por qué, pero debe establecer el ancho: 100% a través de css-rule, pero no en img-tag. La relación de aspecto funcionará por arte de magia)) Me ayudó, espero que esta publicación ayude a otros.
Para obtener una escala más uniforme en todos los navegadores, asegúrese siempre de especificar un viewBox pero deje de lado los atributos de width y height en su elemento svg . Creé una página de prueba para comparar el efecto de especificar los diferentes atributos de SVG en combinación con los anchos y alturas especificados en CSS. Compárelo uno al lado del otro en diferentes navegadores y verá muchas diferencias en el manejo.
Pasé semanas probando todo tipo de soluciones para poder usar SVG en un sitio web adaptable al tamaño que funciona para los principales navegadores modernos.
Los SVG deben escalarse utilizando porcentajes de CSS e incluir imágenes embebidas en mapas de bits.
La única solución que he encontrado para el cambio de tamaño porcentual en IE es incrustar SVG externos en una etiqueta <object>.
Existen varias soluciones para cambiar el tamaño de los SVG en IE a tamaños de píxeles estrictos, pero ninguno de ellos funciona para el cambio de tamaño porcentual.
He creado un conjunto de pruebas no exhaustivo here .
También puede ver aquí: https://gist.github.com/larrybotha/7881691 : esta es la continuación de esta "historia".
Corregir SVG en etiquetas <img> no se escalan en IE9, IE10, IE11
IE9, IE10 e IE11 no escalan correctamente los archivos SVG agregados con etiquetas img cuando se especifican los atributos viewBox , width y height . Ver este codepen en los diferentes navegadores.
Las alturas de las imágenes no se escalarán cuando las imágenes estén dentro de contenedores más angostos que los anchos de las imágenes. Esto se puede resolver de 2 maneras.
Use sed in bash para eliminar atributos de ancho y alto en archivos SVG
Según esta respuesta en , el problema se puede resolver eliminando solo los atributos de width y height .
Este pequeño script buscará de forma recursiva su directorio de trabajo actual para los archivos SVG y eliminará los atributos de compatibilidad con los navegadores cruzados:
find ./ -name ''*.svg'' -print0 | xargs -0 sed -i "" -e ''s/width="[0-9]*/.*/[0-9]*" //'' -e ''s/height="[0-9]*/.*/[0-9]*" //''
Advertencias
La eliminación de los atributos de ancho y alto obligará a la imagen a ocupar todo el ancho de su contenedor en buscadores que no sean IE.
IE10 (otros navegadores requieren pruebas) escalará las imágenes a un tamaño arbitrario, lo que significa que necesitará agregar width: 100% a su CSS para que esas imágenes se ajusten a sus contenedores.
Target IE con CSS
Dado que la solución anterior requiere CSS de todos modos, también podríamos usar un truco para hacer que IE se comporte, y no preocuparnos por tener que administrar cada archivo SVG individual.
El siguiente objetivo serán todas las etiquetas img contengan un archivo SVG, en IE6 + (solo archivos SVG compatibles con IE9 +).
/*
* Let''s target IE to respect aspect ratios and sizes for img tags containing SVG files
*
* [1] IE9
* [2] IE10+
*/
/* 1 */
.ie9 img[src*=".svg"] {
width: 100%;
}
/* 2 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
img[src*=".svg"] {
width: 100%;
}
}
Advertencias
Esto se dirige a cada etiqueta img contenga ".svg" en IE9, IE10 e IE11: si no desea este comportamiento en una imagen en particular, deberá agregar una clase para anular este comportamiento para esa imagen.