Ich versuche, Inline-SVGs mit viewBox-Attributen zu erstellen, aber ohne explizite width- oder height-Attribute. Ich setze die SVG-Breite mit CSS auf 100%. Dadurch sollte die SVG-Datei auf ihren Umhüllungscontainer skaliert und das von der viewBox festgelegte Seitenverhältnis beibehalten werden. In Chrome und Firefox funktioniert das perfekt!

Hier ist ein minimales Codepen-Beispiel für das, worüber ich spreche:http: //codepen.io/pcorey/pen/amkG

HTML:

<div>
  <svg viewBox="0 0 100 10">
    <text x="1" y="9">hello</text>
  </svg>
</div>

CSS:

div {
  width: 400px;
}

svg {
  width: 100%;
  max-height: 100%;
  outline: 1px solid tomato;
}

text {
  font-size: 10px;
}

Die ViewBox ist 100x10. Das äußere Div ist auf eine Breite von 400 Pixel eingestellt. Das bedeutet, dass die SVG-Größe (und in Chrome / Firefox) 40 Pixel betragen sollte. ABER in IE 11 ist die Breite IMMER 150px (auch wenn die Breite des Div 1500px überschreitet ...)

Gibt es eine gute Möglichkeit, dies im IE zu beheben? Warum kann der IE die unbekannte Höhe nicht richtig handhaben? Ich kann das "intrinsisches Seitenverhältnis "Trick, aber das ist super hässlich, erfordert ein anderes DOM-Element und erfordert, dass ich das Auffüllen jedes Mal neu berechne, wenn die Größe des Wrappers geändert wird.

Für weitere Informationen, warum ich das tun möchte, habe ich einen kurzen Blog-Beitrag darüber geschrieben:http: //1pxsolidtomato.com/2014/10/08/quest-for-scalable-svg-text

Danke für die Hilfe