SVG mit Breite/Höhe skaliert nicht auf IE9/10/11

Question

Es gibt ein bekanntes Problem mit IE 9/10/11, wo, wenn Sie eine SVG-Datei haben, das <svg> -Element eine Breite und Höhe angibt, und dann skalieren das SVG-Bild mit den Attributen width und height eines Tags IE nicht ordnungsgemäß skaliert das Bild.

Ich bin auf dieses Problem gestoßen. Ich habe eine Reihe von SVG-Flaggen-Icons. Für das US-Flaggen-Symbol wird das SVG-Objekt geschrieben als:

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

ich die SVG in ein HTML-Dokument mit einem <img> Tag einfügen und nach unten angelegten es zu 20x15:

Auf 39 Chrome wird der SVG gleichen Einschränkungen unterworfen wie so gemacht:

Aber auf IE10, macht es wie folgt:

So scheint, was hier der Fall zu sein, dass, obwohl IE10 das <img> Element 20x15 Größen, ist es nicht die SVG nicht absteuernd - so Am Ende sehen wir nur die obere linke Ecke des Flaggensymbols, das als einfaches blaues Feld angezeigt wird.

Okay ... also scheint dies ein bekanntes Problem mit documented solutions zu sein. Eine Lösung besteht darin, einfach alle Attribute width und height in der SVG-Datei zu entfernen. Dies scheint ein bisschen gefährlich, da ich die tatsächlichen Designs nicht vermasseln möchte. Es ist auch ein bisschen umständlich zu tun, wenn Sie viele SVG-Dateien haben - erfordern mehr Skripte, um die Dateien zu verarbeiten.

Eine schönere Lösung ist CSS zu verwenden, um speziell SVG-Elemente in IE10 Ziel, die offenbar möglich ist, eine herstellerspezifische Medium Abfrage:

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

Okay, aber ich verstehe nicht, diese Lösung. Wenn ich das obige versuche, erweitert IE10 einfach die Größe des SVG, um den gesamten übergeordneten Container zu füllen, was ich nicht möchte. Okay, vielleicht kann ich IE zwingen, das SVG zu skalieren, indem ich die SVG-Breite auf 100% setze, aber dann die Größe des übergeordneten Containers einschränke. Also habe ich die in einem DIV mit einer Breite und Höhe von 20x15 gewickelt. Aber ... das führte genau zu dem gleichen Problem wie zuvor: der Container-DIV ist auf 20x15 fixiert, aber der SVG schrumpft nicht - so dass wir nur noch die obere linke Ecke der Flagge sehen:

... so, ich bin wahrscheinlich einfach nicht etwas über diese Lösung zu verstehen. Wie kann ich IE10/11 dazu bringen, das Flaggensymbol auf 20x15 zu skalieren?

Answer 1

Dies geschieht, wenn Ihr Bild auf dem svg Element das viewBox Attribut fehlt.

Ihre sollten eingestellt werden: 0 0 640 480. Die Nullen sind X- und Y-Offsets und die 640 und 480 entsprechen der Breite und Höhe. Es definiert ein Rechteck, das die Grenzen des Bildes darstellt.

<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

Nehmen Sie die Höhe und Breite aus der SVG-Tag-Zeile.

IE9, IE10 und IE11 skalieren SVG-Dateien, die mit IMG-Tags hinzugefügt wurden, nicht ordnungsgemäß, wenn die Attribute viewBox, width und height angegeben sind.

Das Problem kann nur durch Entfernen nur die width und height Attribute und manipulieren sie über CSS gelöst werden.

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

Answer 3

hier ist der Knoten Skript ich das gleiche Problem zu beheben hatte zu schreiben (für den Ordner mit einer Reihe von SVG), vielleicht wird es für jemanden nützlich sein:

'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 @ diese Flag von wonderflags für Ihre Antwort, müssen Sie viewbox = "0 0 640 480" oder es wird nicht funktionieren. (EU-Flagge)

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