it-swarm.com.de

SVG-Probleme in ie11

Ich habe ein div, dessen Höhe auf 320 Pixel eingestellt ist, dann wird das untergeordnete Element auf 100% Breite davon festgelegt. Das Kind davon ist eine SVG-Datei, in der ich die Breite auf 200% des Containers festlegte. In Chrome und Firefox, das gut funktioniert, bekomme ich ein schönes Bild wie dieses:

 enter image description here

Der HTML-Code sieht folgendermaßen aus:

<div class="kit-template ng-isolate-scope front">
    <div class="svg-document ng-scope">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 259.5 131.4" enable-background="new 0 0 259.5 131.4" xml:space="preserve" class="ng-scope">
            <!-- Removed for brevity -->
        </svg>
    </div>
</div>

und das CSS/SASS sieht so aus: 

.kit-template {
    overflow: hidden;
    position: relative;   
    height: 320px;

    .svg-document {  
        width: 100%;   
        overflow: hidden;
        margin: 0 auto;
        /*position: absolute;
        bottom: 0;*/

        svg {
            width: 200%;

            path, polyline, polygon, rect {
                cursor: pointer;
            }
        }
    }
}

Wie gesagt, das funktioniert gut in Chrome, Firefox und IE Edge. Aber in IE11 bekomme ich das:

 enter image description here

Und wenn ich das Element inspiziere, sehe ich, dass die SVG so aussieht, als hätte sie links und rechts eine Polsterung, aber ich kann Ihnen versichern, dass dies nicht der Fall ist.

Weiß jemand, warum dies passiert und wie ich es reparieren kann?

Update 1

Ich habe eine sehr einfache Version auf Codepen erstellt, damit Sie das Problem sehen können. Hier ist es:

http://codepen.io/r3plica/pen/Kdypwe

Sehen Sie sich das in Chrome, Firefox, Edge und dann IE11 an. Sie werden sehen, dass nur IE11 das Problem hat.

14
r3plica

Sie können dem SVG-Tag das height="320"-Attribut hinzufügen. Also IE kann korrekt gerendert werden. Ich glaube, dass IE11 durch die Verwendung von width 200% in Ihrem CSS abgeworfen wird. Da jedoch xml:space="preserve" die Standardeinstellung ist, bleiben bei der Einstellung nur der Höhe die Proportionen Ihrer SVG-Jacke erhalten.

Codepen-Beispiel in IE11 testen:

http://codepen.io/jonathan/pen/MarvEm

<svg height="320" viewBox="0 0 248.2 142.8" enable-background="new 0 0 248.2 142.8" xml:space="preserve">

Entfernen Sie auch das XML-Namespace-Tag, da es innerhalb einer HTML-Seite nicht benötigt wird. Sie können auch einige der SVG-Attribute wie version, xmlns, xmlns:xlink, x und y entfernen, da diese ebenfalls nicht benötigt werden.

8

Ich hatte ein Problem mit der SVG-Bilddarstellung in IE11. Das Problem war, dass das innere SVG-Bild Breite und Höhe erwähnte. Aus diesem Grund konnte der IE11 nicht richtig skaliert werden, und auf IE Edge (Chrom), Firefox (Firefox) funktionierte alles einwandfrei.

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">

Um das Problem zu beheben, entfernte ich width = "120" height = "120" und funktionierte einwandfrei . Als ich das svg-Bild mit width = "120" height = "120" betrachtete, betrachtete viewBox = "0 0 120 120 ", aber in IE11 wurde nur width =" 120 "height =" 120 " angezeigt.

ausgabe war:

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">

 enter image description here

0
Sandeep M