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

Выравнивание в preserveAspectRatio

Содержимое SVG можно не только растягивать, но и сдвигать вправо-влево или вверх-вниз. Для этого нужно указать положение содержимого относительно осей X и Y, например xMinYMid:

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

Возможные значения для каждой оси:

xMin
xMid
xMax
YMin
YMid
YMax

Положение задаётся двумя параметрами: первым всегда указывается положение по X, вторым по Y. Положение по оси Y всегда пишется с большой буквы. Оба параметра обязательны.

Значение по умолчанию — xMidYMid (содержимое выравнивается по середине большей стороны).

Хотите верстать адаптивно и по методологии, использовать препроцессоры и автоматизацию? Записывайтесь на профессиональный курс «HTML и CSS. Адаптивная вёрстка и автоматизация». Цена 12 000 ₽.

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

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

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

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

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

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

Зарегистрироваться