Как автоматически установить высоту контейнера для SVG c viewbox?
Если SVG не задавать жестких размеров, а задать соотношение сторон через viewBox, то SVG принимает ширину контейнера, а высота при этом определяется соотношением сторон. Даже если высота контейнера меньше высоты SVG.
Как сделать так, чтобы высота контейнера (div#container) автоматически определялась высотой SVG.
Попробовал height: auto;, но высота получается чуть больше, добавлял padding:0; box-sizing:content-box;, пробовал задать размеры SVG, но все равно снизу есть свободное пространство.
#container {
width: 180px;
height: auto;
background: yellow;
box-sizing: content-box;
padding: 0px;
}
<div id="container">
<svg fill="#000000" viewbox="2 2 20 20">
<path d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z"/>
</svg>
</div>
Пока единственный способ (до которого я дошел) не повторять размеры иконки - использовать css-variables как для ширины, так и для высоты:
:root {
--icon-size: 180px;
}
#container {
width: var(--icon-size);
height: var(--icon-size);
background: yellow;
}
<div id="container">
<svg fill="#000000" viewbox="2 2 20 20">
<path d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z"/>
</svg>
</div>
Это вроде снимает лишние зависимости в коде (можно одной переменной редактировать сразу оба параметра), но ведь иконка может быть и не квадратной. Можно ли автоматически выставить высоту контейнера SVG с использованием viewBox?