Я пытаюсь построить встроенные SVG с атрибутами viewBox, но не имеет явных атрибутов ширины или высоты. Я устанавливаю ширину 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) 40 пикселей. НО, в IE 11 ширина равна ALWAYS 150px (даже если ширина div превышает 1500px...)
Есть ли хороший способ исправить это в IE? Почему IE не может корректно обрабатывать неизвестную высоту? Я могу использовать трюк "внутреннее соотношение сторон", но это супер уродливо, требуется другой элемент DOM и требует, чтобы я перепродавал верхнюю часть каждого раза, когда обертка изменяет размер.
Для получения дополнительной информации о том, почему я хочу это сделать, я написал короткое сообщение в блоге об этом: http://1pxsolidtomato.com/2014/10/08/quest-for-scalable-svg-text/
Спасибо за помощь!