web-dev-qa-db-fra.com

SVG avec largeur / hauteur non proportionnelle à IE9 / 10/11

Il existe un problème connu avec IE 10/09/11 où, si vous avez un fichier SVG, l'élément <svg> Spécifie une largeur et une hauteur, puis vous redimensionnez l'image SVG à l'aide de les attributs width et height d'une balise <img>, IE ne redimensionne pas correctement l'image.

J'ai rencontré ce problème. J'ai une série d'icônes de drapeau SVG. Pour l'icône de drapeau américain, l'objet SVG est écrit comme suit:

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

Et voici la source complète pour le SVG.

J'insère le fichier SVG dans un document HTML avec une balise <img> Et le redimensionne à 20x15:

Sur Chrome 39, le fichier SVG est correctement rendu, comme suit:

enter image description here

Mais sur IE10, il se présente comme suit:

enter image description here

Donc, ce qui semble se produire ici, c'est que même si IE10 dimensionnait l'élément <img> À 20x15, il ne réduit pas l'échelle SVG - nous finissons donc par ne voir que le coin supérieur gauche de l'icône du drapeau. apparaît comme une boîte bleue unie.

D'accord ... cela semble donc être un problème connu avec solutions documentées . Une solution consiste simplement à supprimer tous les attributs width et height du fichier SVG. Cela semble un peu dangereux car je ne veux pas bousiller les dessins. C'est également un peu fastidieux à faire si vous avez beaucoup de fichiers SVG - nécessitant plus de scripts pour traiter les fichiers.

Une solution plus intéressante consiste à utiliser CSS pour cibler spécifiquement les éléments SVG dans IE10, ce qui est apparemment possible à l'aide d'une requête multimédia spécifique au fournisseur:

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

D'accord, mais je ne comprends pas cette solution. Lorsque j'essaie ce qui précède, IE10 augmente simplement la taille du fichier SVG pour remplir tout le conteneur parent, ce qui n'est pas ce que je veux. Ok, alors peut-être que je peux forcer IE à mettre à l'échelle SVG en définissant la largeur SVG sur 100%, mais en limitant ensuite la taille du conteneur parent. J'ai donc enveloppé le <img> dans une DIV avec une largeur et une hauteur de 20 x 15. Mais ... cela a abouti au même problème qu'auparavant: le conteneur DIV est fixé à 20 x 15, mais le format SVG ne diminue pas - nous ne nous retrouvons donc que dans la partie supérieure. - coin bleu du drapeau comme avant:

enter image description here

... alors, je ne comprends probablement pas quelque chose à propos de cette solution. Comment puis-je obtenir que IE10/11 réduise l'icône du drapeau jusqu'à 20x15?

htmlcssinternet-explorersvg
44
Siler

Cela se produit lorsque l’attribut viewBox de l’élément svg est absent de votre image.

Le vôtre devrait être réglé sur: 0 0 640 480. Les zéros sont des décalages X et Y et les 640 et 480 correspondent à la largeur et à la hauteur. Il définit un rectangle qui représente les limites de l'image.

<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">
73
Josiah Keller

Prenez la hauteur et la largeur de la ligne de tag SVG.

IE9, IE10 et IE11 ne mettent pas correctement à l'échelle les fichiers SVG ajoutés aux balises img lorsque les attributs viewBox, width et height sont spécifiés.

Le problème peut être résolu en supprimant niquement les attributs width et height et en les manipulant uniquement via CSS.

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

Note: Si vous placez le SVG en ligne dans IE11, les attributs width et height sont nécessaires dans la balise SVG, ainsi que le réglage de la largeur de la balise SVG à 100% à l'aide de CSS, de sorte échelles correctement.

20
rfornal

voici le script de nœud que j'ai dû écrire pour résoudre le même problème (pour le dossier avec un certain nombre de SVG), cela sera peut-être utile pour quelqu'un:

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