Hay un problema conocido con el IE 9/10/11 donde si usted tiene un archivo SVG donde el <svg> elemento especifica la anchura y la altura, y, a continuación, cambiar la escala de la imagen SVG utilizando el width y height atributos de un <img> etiqueta, es decir, no indica correctamente la escala de la imagen.

Me he topado con este problema. Tengo una serie de SVG bandera de iconos. Para los que NOS icono de la bandera, el SVG objeto se escribe como:

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

<!-- elements to draw flag .. -->

</svg>

Y aquí está el código fuente completo para el formato SVG.

Insertar el SVG en un documento HTML con un <img> etiqueta, y abajo de la escala a 20×15:

Chrome 39, el SVG es visualizado correctamente así:

SVG con anchura/altura no escala en IE9/10/11

Pero en IE10, se representa de la siguiente manera:

SVG con anchura/altura no escala en IE9/10/11

Así, lo que parece estar sucediendo aquí es que aunque el IE10 tamaños de la <img> elemento de 20×15, no de convertir el archivo SVG – por lo que ve es sólo la esquina superior izquierda del icono de la bandera, que aparece como una simple caja azul.

Bien… así que este parece ser un problema conocido con documentado soluciones. Una solución es simplemente eliminar todos los width y height atributos en el archivo SVG. Esto parece un poco peligroso ya que no quiero arruinar el real diseños. También es un poco engorroso hacer si usted tiene un montón de archivos SVG que requieren de más secuencias de comandos para procesar los archivos.

Una mejor solución es utilizar CSS para dirigirse específicamente a SVG elementos en IE10, que al parecer es posible mediante el uso de un proveedor específico de la consulta de medios:

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

Bien, pero no entiendo esta solución. Cuando trato de lo anterior, IE10 simplemente se expande el tamaño de la SVG para llenar el contenedor principal, que no es lo que yo quiero. Bueno, a lo mejor puedo fuerza, es decir, a escala de la SVG mediante el establecimiento de la SVG ancho al 100%, pero luego se limita el tamaño del contenedor primario. Así que me envolvió la <img> en un DIV con un ancho y una altura de 20×15. Pero… que resultó en el mismo problema de antes: el DIV contenedor, se fija en el 20×15, pero el SVG no shrink – todo lo que termina con la parte superior izquierda esquina azul de la bandera como antes:

SVG con anchura/altura no escala en IE9/10/11

… así que, probablemente estoy solo no entender algo acerca de esta solución. ¿Cómo puedo obtener IE10/11 a escala de la bandera icono de abajo a 20×15?

InformationsquelleAutor Siler | 2015-01-15

4 Comentarios

  1. 73

    Esto sucede cuando su imagen se pierde la viewBox atributo en el svg elemento.

    La suya debe ser configurado para: 0 0 640 480. Los ceros son los desplazamientos X y y y la 640 y 480 corresponden a la anchura y la altura. Se 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">
    • Hay un buen artículo aquí acerca de ella, que abarca tanto a las técnicas que se mencionan aquí, pero el de Josías, debería funcionar
    • Supuse que esto era una respuesta, pero en realidad necesita el viewBox y el CSS width: 100% para que funcione.
  2. 21

    Tomar la altura y la anchura de la SVG línea de la etiqueta.

    IE9, IE10, IE11 y no propiamente de la escala de archivos SVG añadido con las etiquetas img cuando viewBox, atributos de anchura y altura especificadas.

    El problema puede ser resuelto mediante la eliminación de sólo el width y height atributos y manipularlos a través de CSS sólo.

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

    Nota: Si va a colocar el SVG en línea en IE11, a continuación, la anchura y la altura son necesarios los atributos en la etiqueta SVG, junto con el establecimiento de la anchura de la etiqueta SVG al 100% el uso de CSS, por lo que la escala se ajusta correctamente.

    • esta solucionado mi problema. sólo quiero añadir que el «viewBox» – attr no debe ser eliminado
    • Lo que si quiero usar menos de 100% de mis imágenes? Otra de las palabras, quiero «escala» de ella.
    • Probablemente la escala de los alrededores de contenedores.
    • Tenga en cuenta que si va a colocar el SVG en línea en IE11, a continuación, la anchura y la altura son necesarios los atributos en la etiqueta svg, junto con el establecimiento de la anchura de la etiqueta svg al 100% el uso de css, por lo que la escala se ajusta correctamente.
    • Marian … gracias por la nota … voy a añadir a mi respuesta, pero también se dan cuenta de que esta respuesta es más de cuatro años de edad.
  3. 2

    aquí es el nodo script tuve que escribir para solucionar el mismo problema (la carpeta con un número de SVG s), tal vez va a ser ú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);
                    }
                }) 
            }
        })
    }
  4. -1

    Look @ esta bandera de wonderflags por tu respuesta, es necesario establecer viewbox=»0 0 640 480″ o no de trabajo. (Bandera de la UE)

    <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"><defs><g id="d"><g id="b"><path d="M0-1l-.3 1h.5z" id="a"/><use transform="scale(-1 1)" xlink:href="#a"/></g><g id="c"><use transform="rotate(72)" xlink:href="#b"/><use transform="rotate(144)" xlink:href="#b"/></g><use transform="scale(-1 1)" xlink:href="#c"/></g></defs><path fill="#039" d="M0 0h640v480H0z"/><g transform="translate(320 242.263) scale(23.7037)" fill="#fc0"><use height="100%" width="100%" xlink:href="#d" y="-6"/><use height="100%" width="100%" xlink:href="#d" y="6"/><g id="e"><use height="100%" width="100%" xlink:href="#d" x="-6"/><use height="100%" width="100%" xlink:href="#d" transform="rotate(-144 -2.344 -2.11)"/><use height="100%" width="100%" xlink:href="#d" transform="rotate(144 -2.11 -2.344)"/><use height="100%" width="100%" xlink:href="#d" transform="rotate(72 -4.663 -2.076)"/><use xlink:href="#d" transform="rotate(72 -5.076 .534)"/></g><use height="100%" width="100%" xlink:href="#e" transform="scale(-1 1)"/></g></svg>

Dejar respuesta

Please enter your comment!
Please enter your name here