• Теория
  • Теория

Атрибут preserveAspectRatio

По умолчанию содержимое SVG с viewBox масштабируется сохраняя пропорции, и если соотношения сторон вьюпорта и вьюбокса не совпадают, вокруг содержимого появляются поля:

С помощью свойства preserveAspectRatio это поведение можно изменять: например, значение none указывает, что сохранять пропорции не нужно:

<svg viewBox="0 0 237 300" preserveAspectRatio="none">
  …
</svg>

В этом случае область, размеры которой заданы вьюбоксом, растягивается на всё доступное пространство вьюпорта:

preserveAspectRatio задаётся только атрибутом.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Размеры в SVG» тренажёра «Внутреннее устройство SVG» можно после регистрации и оформления подписки.