html - percent - svg scaling

SVG con ancho/alto no escala en IE9/10/11 (4)

Hay un problema conocido con IE 10/09/11 donde si tiene un archivo SVG donde el elemento <svg> especifica un ancho y alto, y luego escala la imagen SVG usando los atributos de width y height de una etiqueta <img> , IE no escala correctamente la imagen.

Me he encontrado con este problema. Tengo una serie de iconos de bandera de SVG. Para el icono de bandera de EE. UU., El objeto SVG se escribe como:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640">  </svg>

Y aquí está la fuente completa para el SVG.

Inserté el SVG en un documento HTML con una etiqueta <img> y lo reduje a 20x15:

En Chrome 39, el SVG se representa correctamente así:

Pero en IE10, se representa de la siguiente manera:

Entonces, lo que parece estar sucediendo aquí es que aunque IE10 clasifica el elemento <img> a 20x15, no reduce la escala del SVG, por lo que terminamos viendo solo la esquina superior izquierda del ícono de la bandera, que aparece como un caja azul lisa.

Está bien ... así que parece ser un problema conocido con soluciones documentadas . Una solución es simplemente eliminar todos los atributos de width y height en el archivo SVG. Esto parece un poco peligroso ya que no quiero arruinar los diseños reales. También es un poco engorroso si tienes muchos archivos SVG, lo que requiere más scripts para procesar los archivos.

Una solución más agradable es usar CSS para dirigirse específicamente a los elementos SVG en IE10, lo que aparentemente es posible utilizando una consulta de medios específica del proveedor:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { img[src*=".svg"] { width: 100%; } }

De acuerdo, pero no entiendo esta solución. Cuando pruebo lo anterior, IE10 simplemente expande el tamaño del SVG para llenar todo el contenedor primario, que no es lo que quiero. De acuerdo, entonces quizás pueda obligar a IE a escalar el SVG estableciendo el ancho de SVG al 100%, pero luego restringir el tamaño del contenedor principal. Así que envolví el <img> en un DIV con un ancho y una altura de 20x15. Pero ... eso acaba de dar como resultado el mismo problema que antes: el contenedor DIV se fija en 20x15, pero el SVG no se contrae, así que todo lo que terminamos es la esquina superior izquierda azul de la bandera como antes:

... entonces, probablemente no entiendo nada sobre esta solución. ¿Cómo puedo obtener IE10 / 11 para escalar el icono de la bandera hasta 20x15?

Aquí está el script de nodo que tuve que escribir para arreglar el mismo problema (para la carpeta con un número de SVG), tal vez sea útil para alguien:

''use strict'' const fs = require(''fs'') fs.readdir(`./`, (err, flist) => { if (typeof flist != ''undefined'') { flist.forEach((file, i) => { proceed(file) }) } }) function proceed(file){ fs.readFile(`./${file}`, ''utf8'', (err,svg) => { let out = svg.replace(''<svg'', ''<svg viewBox="0 0 640 480" '') if (!svg.includes(''viewBox'')){ fs.writeFile(file, out, err => { if(err) { console.log(err); } else { console.log("Saved: " + file); } }) } }) }

Esto sucede cuando a su imagen le falta el atributo viewBox en el elemento svg .

El suyo debe establecerse en: 0 0 640 480 . Los ceros son desplazamientos X e Y y los valores 640 y 480 corresponden al ancho y alto. Define un rectángulo que representa los límites de la imagen.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640" viewBox="0 0 640 480">

Mire @ este indicador de wonderflags para su respuesta, necesita establecer viewbox = "0 0 640 480" o no funcionará. (Bandera de la UE)

Saque el alto y el ancho de la línea de etiqueta SVG.

IE9, IE10 e IE11 no escalan correctamente los archivos SVG agregados con etiquetas img cuando se especifican los atributos viewBox, width y height.

El problema puede resolverse eliminando solo los atributos de width y height y manipularlos solo mediante CSS.

img[src*=".svg"] { width: 100%; }