preserveAspectRatio используется в SVG (Scalable Vector Graphics) для управления тем, как содержимое рисунка сохраняется относительно своего контейнерного блока при изменении размеров окна просмотра или самого контейнера. Этот атрибут позволяет разработчикам контролировать поведение содержимого SVG при изменениях масштаба, гарантируя сохранение пропорций или центрирование внутри доступной области.Основные компоненты атрибута
Значение по умолчанию (xMidYMid meet)
По умолчанию значение preserveAspectRatio равно "xMidYMid meet". Это значит, что рисунок центрируется горизонтально и вертикально, а также сохраняет своё соотношение сторон путём уменьшения размера, чтобы поместиться целиком в окно просмотра.
Формат значений
Формат значения выглядит следующим образом:
ВыделитьSVG
<preserveAspectRatio-value> = [ <align> || <meetOrSlice> ]Где:
<align>: управляет выравниванием SVG-контента внутри контейнера.<meetOrSlice>: контролирует, должно ли содержание растягиваться ("slice") или уменьшаться ("meet"), чтобы соответствовать доступному пространству.
Возможные значения
Выравнивание (<align>)
Выравнивание состоит из двух частей: горизонтального и вертикального положения. Эти части соединяются пробелом и записываются в следующем порядке: сначала горизонтальная позиция, затем вертикальная.
xMin: Контент выровнен слева.xMid: Центрированное горизонтально.xMax: Контент выровнен справа.YMin: Контент выровнен сверху.YMid: Центрировано вертикально.YMax: Контент выровнен снизу.
Например, "
xMinYMin" приведёт к выравниванию контента в верхнем левом углу, тогда как "xMaxYMax" разместит контент в правом нижнем углу.Режимы растяжения/сохранения (<meetOrSlice>)
Этот компонент описывает, как масштабируется содержимое при несоответствии размеров окна просмотра и контента.
- Meet (default): Содержимое уменьшается пропорционально, чтобы полностью уместиться в окне просмотра, возможно оставив пустые пространства вокруг.
- Slice: Содержимое увеличивается настолько, насколько это возможно, чтобы заполнить весь контейнер, даже если некоторые части будут обрезаны.
Примеры возможных комбинаций:
"xMinYMin slice": Растягиваемое содержание помещается в верхний левый угол и обрезается по мере необходимости."xMidYMid meet": По умолчанию: содержимое равномерно центрируется и масштабируется до наименьшего возможного размера, сохраняя пропорции."xMaxYMax slice": Контент размещён в правом нижнем углу и увеличен до максимального размера, независимо от обрезания.
Практическое применение
Использование разных настроек
preserveAspectRatio полезно в ситуациях, когда вам нужно управлять поведением векторного изображения при динамическом изменении размера экрана или контейнера.Пример использования:
ВыделитьHTML
<svg width="300px" height="200px">
<rect x="0" y="0" width="100%" height="100%"/>
<!-- Круг фиксированного размера -->
<circle cx="50" cy="50" r="50" fill="blue"/>
</svg>Здесь круг зафиксирован размером 100×100 пикселей. Если мы хотим убедиться, что он остаётся центром видимой области при любых размерах окна просмотра, используем:
ВыделитьHTML
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<circle cx="50" cy="50" r="50" fill="blue"/>
</svg>Заключение
Правильное использование атрибута
preserveAspectRatio даёт гибкость и контроль над рендерингом вашего SVG-контента. Это особенно важно при разработке адаптивных интерфейсов и графического дизайна, обеспечивая высокое качество визуализации независимо от устройства или браузера пользователя.