Problemi SVG in ie11

Question

Ho un div che ha l'altezza impostata a 320 pixel, quindi il figlio è impostato su 100% di larghezza. Il figlio di questo è un file SVG che ho impostato la larghezza al 200% del contenitore. in Chrome e Firefox che funziona bene, ho un bella immagine come questa:

Il codice HTML simile al seguente:

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

e il CSS/SASS assomiglia a questo:

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

Come ho detto, questo funziona bene sia in Chrome, Firefox e IE Edge. Ma in IE11 ottengo questo:

E se io ispezionare l'elemento, posso vedere che la SVG sembra che ha padding a destra ea sinistra su di esso, ma vi posso assicurare che non è così.

Qualcuno sa perché questo sta accadendo e come posso risolvere il problema?

Update 1

ho creato una versione molto semplice su codepen modo da poter vedere il problema. Eccolo:

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

View che in Chrome, Firefox, Edge e poi IE11. Vedrai che solo IE11 ha il problema.

Answer 1

Quello che puoi fare è aggiungere l'attributo height="320" al tuo tag SVG. Quindi IE può eseguire correttamente il rendering. Credo che IE11 sia stato eliminato usando la larghezza del 200% nel tuo CSS. Ma dal momento che l'impostazione predefinita è xml:space="preserve", l'impostazione mantiene solo le proporzioni della tua giacca SVG.

test esempio codepen in IE11:

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

Rimuovere anche il tag namespace XML poiché non è necessario all'interno di una pagina HTML. E puoi anche rimuovere alcuni attributi SVG come version, xmlns, xmlns:xlink, x e , poiché anche questi non sono necessari.