SVG con larghezza/altezza non scala su IE9/10/11

Question

C'è un problema noto con IE 9/10/11 in cui, se si dispone di un file SVG in cui l'elemento <svg> specifica una larghezza e altezza, e quindi si scala l'immagine SVG utilizzando gli attributi width e height di un tag <img>, IE non ridimensiona correttamente l'immagine.

Ho incontrato questo problema. Ho una serie di icone di flag SVG. Per l'icona della bandiera degli Stati Uniti, l'oggetto SVG è scritto come:

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

And here's the full source for the SVG.

inserisco lo SVG in un documento HTML con un tag <img>, e giù scala a 20x15:

Su Chrome 39, lo SVG è reso correttamente in questo modo:

Ma su IE10, rende come segue:

Allora, che cosa sembra accadere qui è che, anche se IE10 dimensioni dell'elemento <img> a 20x15, non il downscaling della SVG - così finiamo per vedere solo l'angolo in alto a sinistra dell'icona della bandiera, che appare come una semplice scatola blu.

Okay ... questo sembra essere un problema noto con documented solutions. Una soluzione è semplicemente rimuovere tutti gli attributi width e height nel file SVG. Questo sembra un po 'pericoloso in quanto non voglio rovinare i progetti attuali. È anche un po 'complicato da fare se si hanno molti file SVG, che richiedono più script per elaborare i file.

Una soluzione più bello è quello di utilizzare i CSS per indirizzare specificamente gli elementi SVG in IE10, che apparentemente è possibile utilizzando una specifica media query fornitore:

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

Va bene, ma io non capisco questa soluzione. Quando provo quanto sopra, IE10 semplicemente espande la dimensione del SVG per riempire l'intero contenitore genitore, che non è quello che voglio. Ok, forse posso forzare IE a scalare l'SVG impostando la larghezza SVG al 100%, ma poi vincolando la dimensione del contenitore genitore. Così ho avvolto lo <img> in un DIV con una larghezza e un'altezza di 20x15. Ma ... questo ha provocato lo stesso problema di prima: il contenitore DIV è fissato a 20x15, ma SVG non si restringe, quindi tutto ciò che finiamo è l'angolo blu in alto a sinistra della bandiera come prima:

... così, sono probabilmente solo non capire qualcosa su questa soluzione. Come posso ottenere IE10/11 per ridimensionare l'icona della bandiera su 20x15?

Answer 1

Ciò accade quando l'immagine manca l'attributo viewBox sull'elemento svg.

Si deve impostare su: 0 0 640 480. Gli zeri sono offset X e Y e il 640 e il 480 corrispondono alla larghezza e all'altezza. Definisce un rettangolo che rappresenta i confini dell'immagine.

<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"> 

Answer 2

Prendere l'altezza e la larghezza dalla riga di tag SVG.

IE9, IE10 e IE11 non scalano correttamente i file SVG aggiunti con i tag img quando sono specificati gli attributi viewBox, width e height.

Il problema può essere risolto rimuovendo solo i width e height attributi e manipolarle solo tramite CSS.

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

Answer 3

Ecco lo script del nodo ho dovuto scrivere per risolvere lo stesso problema (per la cartella con un numero di SVG di), forse sarà utile per qualcuno:

'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); 
       } 
      }) 
     } 
    }) 
} 

Answer 4

Look @ questo bandiera da wonderflags per la tua risposta, devi impostare viewbox = "0 0 640 480" o non funzionerà. (Bandiera 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>