La dimensione dello sfondo con SVG è diminuita in IE9-10

Ho un div set con un’immagine di sfondo:

Play Video

con il seguente CSS:

 div { background-image: url('icon.png'); background-image: url('icon.svg'), none; background-size: 40px 40px; background-repeat: no-repeat; background-position: 90% 50%; padding: 20px; width: 150px; } 

La dimensione dello sfondo è rispettata in Firefox, Safari e Chrome. In IE8, SVG viene sostituito dal file PNG. Tuttavia, in IE9 e IE10, il file SVG viene drasticamente ridimensionato. Il problema sembra essere collegato alla larghezza e all’altezza del div. Se aggiungo un’altezza di 150 px, l’SVG viene reso correttamente. Se lo faccio più piccolo (cioè 100px) la grafica inizia a ridursi.

Qualcuno ha trovato un modo per risolvere questo problema in Explorer? C’è un modo per dire a IE di usare il valore della dimensione dello sfondo indipendentemente dalla larghezza e dall’altezza del div?

Assicurati che il tuo SVG abbia una width e height specificate. Se lo stai generando da Illustrator, assicurati che la casella “Responsive” sia deselezionata poiché questa opzione rimuove larghezza e altezza.

Aggiungendo una larghezza e un’altezza all’SVG, come ha detto mbxtr ha quasi funzionato per me. Avevo bisogno di aggiungere preserveAspectRatio="none slice" per farlo funzionare responsabilmente in IE.

Bene, non sembra che ci sia una soluzione. Sorpresa sorpresa. Dopo tutto, è IE. Ho finito per usare il seguente codice:

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

Mi è piaciuta la versione più pulita, ma questo hack funziona in tutti i browser moderni, inclusi IE8, 9 e 10 (probabilmente 11 ma non ho provato).

Per me queste 3 correzioni hanno aiutato:

  • Se ansible, imposta la posizione dello sfondo su “centro”
  • Per la dimensione dello sfondo imposta entrambi i valori, “100% auto” non farà il trucco, quindi usa “100% 100%”
  • Se ciò non aiuta ancora a modificare l’ultimo attributo “viewBox” dello SVG stesso e renderlo un pixel più largo e più alto della larghezza e dell’altezza di SVG. Ciò riduce leggermente l’SVG, ma impedisce a IE di interromperlo e le dimensioni più piccole non verranno notate affatto.

Ho avuto questo problema e ho scoperto che sia la rimozione dell’altezza e della larghezza all’interno del codice per lo svg BUT mantenendo la viewBox in grado di risolvere il problema.

Consiglio di utilizzare un sito di compilazione come: https://jakearchibald.github.io/svgomg/ e impostare l’opzione per “preferire viewBox su altezza e larghezza”

ANCHE se non funziona, in Illustrator prova ad applicare uno sfondo quadrato attorno all’immagine svg lasciando abbastanza spazio attorno ai bordi.

E importa gli svg nel tuo foglio di stile usando -> data uri: … esempio:

background-image: data-uri (‘image / svg + xml; charset = UTF-8’, ‘dove / tuo / svg / è / trova’);

Abbiamo riscontrato un problema simile con le immagini di sfondo SVG che non erano il sito completo di un elemento contenitore (come la lente di ingrandimento sul lato sinistro di un input di ricerca).

Avevamo creato SVG in Illustrator CC, ma eseguirli attraverso l’ottimizzatore SVG di Peter Collingridge per eliminare tutto il cruft non necessario ha fatto il trucco. http://petercollingridge.appspot.com/svg-optimiser

Ho provato la soluzione di @ mbxtr

Assicurati che il tuo SVG abbia una larghezza e un’altezza specificate. Se lo stai generando da Illustrator, assicurati che la casella “Responsive” sia deselezionata poiché questa opzione rimuove larghezza e altezza.

Non funzionava ancora su Windows Chrome e IE. Stavo esportando un’icona di carattere, quindi se hai un font, assicurati di esportarlo come:

  • “carattere: converti in contorni”
  • e “reattivo” è falso

Ho anche deselezionato “minify” nel caso in cui …

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 (altezza originale = 1050) aggiungi direttamente a se stesso il file svg preserveAspectRatio = “none” height = “2100”