Я пытаюсь создать встроенные SVG с атрибутами viewBox, но без явных атрибутов width или height. Я устанавливаю ширину SVG на 100% с помощью CSS. Это должно позволить SVG масштабироваться до его упаковочного контейнера, сохраняя соотношение сторон, установленное viewBox. В Chrome и Firefox это работает отлично!

Вот минимальный пример кода, о котором я говорю:http://codepen.io/pcorey/pen/amkGl

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

ViewBox является 100x10. Внешний div имеет ширину 400 пикселей. Это означает, что высота SVG должна быть (и находится в Chrome / Firefox) 40px. НО, в IE 11 ширина ВСЕГДА 150px (даже если ширина div превышает 1500px ...)

Есть хороший способ исправить это в IE? Почему IE не может правильно обрабатывать неизвестную высоту? Я могу использоватьвнутреннее соотношение сторон"хитрость, но это очень уродливо, требует другого элемента DOM и требует, чтобы я пересчитывал верхнюю часть отступа каждый раз, когда изменяется размер оболочки.

Для получения дополнительной информации о том, почему я хочу это сделать, я написал короткую запись в блоге об этом:http://1pxsolidtomato.com/2014/10/08/quest-for-scalable-svg-text/

Спасибо за помощь!