Spec-Zone.ru › SVG

preserveAspectRatio

Атрибут preserveAspectRatio указывает, как элемент с viewBox, задающим определенное соотношение сторон, должен вписываться в область просмотра с другим соотношением сторон.

Соотношение сторон изображения SVG определяется атрибутом viewBox. Поэтому, если viewBox не задан, атрибут preserveAspectRatio не влияет на масштабирование SVG (за исключением элемента <image>, где preserveAspectRatio работает иначе, как описано ниже).

Синтаксис

preserveAspectRatio="<align> [<meet or slice>]"

Значение атрибута preserveAspectRatio может состоять из двух ключевых слов: обязательного значения выравнивания и необязательного ключевого слова meet или slice.

Значение выравнивания указывает, нужно ли принудительно использовать равномерное масштабирование и, если нужно, какой метод выравнивания использовать, если соотношение сторон viewBox не совпадает с соотношением сторон области просмотра. xMidYMid — значение по умолчанию. Значением выравнивания должно быть одно из следующих ключевых слов:

none

Не требует равномерного масштабирования. При необходимости масштабируйте графическое содержимое данного элемента неравномерно, чтобы ограничивающая рамка элемента точно совпадала с прямоугольником области просмотра. Обратите внимание: если <align> имеет значение none, необязательное значение <meetOrSlice> игнорируется.

xMinYMin

Требует равномерного масштабирования. Совместите <min-x> элемента viewBox с наименьшим значением X области просмотра. Совместите <min-y> элемента viewBox с наименьшим значением Y области просмотра.

xMidYMin

Требует равномерного масштабирования. Совместите среднее значение X элемента viewBox со средним значением X области просмотра. Совместите <min-y> элемента viewBox с наименьшим значением Y области просмотра.

xMaxYMin

Требует равномерного масштабирования. Совместите <min-x>+<width> элемента viewBox с максимальным значением X области просмотра. Совместите <min-y> элемента viewBox с наименьшим значением Y области просмотра.

xMinYMid

Требует равномерного масштабирования. Совместите <min-x> элемента viewBox с наименьшим значением X области просмотра. Совместите среднее значение Y элемента viewBox со средним значением Y области просмотра.

xMidYMid

Требует равномерного масштабирования. Совместите среднее значение X элемента viewBox со средним значением X области просмотра. Совместите среднее значение Y элемента viewBox со средним значением Y области просмотра. Это значение по умолчанию.

xMaxYMid

Требует равномерного масштабирования. Совместите <min-x>+<width> элемента viewBox с максимальным значением X области просмотра. Совместите среднее значение Y элемента viewBox со средним значением Y области просмотра.

xMinYMax

Требует равномерного масштабирования. Совместите <min-x> элемента viewBox с наименьшим значением X области просмотра. Совместите <min-y>+<height> элемента viewBox с максимальным значением Y области просмотра.

xMidYMax

Требует равномерного масштабирования. Совместите среднее значение X элемента viewBox со средним значением X области просмотра. Совместите <min-y>+<height> элемента viewBox с максимальным значением Y области просмотра.

xMaxYMax

Требует равномерного масштабирования. Совместите <min-x>+<width> элемента viewBox с максимальным значением X области просмотра. Совместите <min-y>+<height> элемента viewBox с максимальным значением Y области просмотра.

Следующие два ключевых слова определяют, как масштабировать SVG относительно границ контейнера. Указывать значение meet или slice необязательно; если оно указано, это должно быть одно из двух ключевых слов. meet — значение по умолчанию.

meet

Масштабирует графику так, чтобы:

  • Соотношение сторон сохранялось.
  • Весь viewBox был виден в области просмотра.
  • viewBox был увеличен настолько, насколько это возможно при соблюдении остальных условий.

В этом случае, если соотношение сторон графики не совпадает с соотношением сторон области просмотра, часть области просмотра будет выходить за границы viewBox (то есть область, в которой будет отображаться viewBox, окажется меньше области просмотра).

slice

Масштабирует графику так, чтобы:

  • Соотношение сторон сохранялось.
  • viewBox полностью покрывал область просмотра.
  • viewBox был уменьшен настолько, насколько это возможно при соблюдении остальных условий.

В этом случае, если соотношение сторон viewBox не совпадает с соотношением сторон области просмотра, часть viewBox будет выходить за границы области просмотра (то есть область, в которой будет отображаться viewBox, окажется больше области просмотра).

Примеры

>

Использование meet, когда ширина > высоты

В этом примере показано использование meet, когда width элемента больше его height. Представлены три варианта с тремя разными значениями выравнивания: xMidYMid, xMinYMid и xMaxYMid.

<svg viewBox="-1 -1 202 40" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path
      id="smiley"
      d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>

<rect x="0" y="0" width="60" height="30">
  <title>xMidYMid meet</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="60"
  height="30"
  preserveAspectRatio="xMidYMid meet"
  x="0"
  y="0">
  <use href="#smiley" />
</svg>

<rect x="70" y="0" width="60" height="30">
  <title>xMinYMid meet</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="60"
  height="30"
  preserveAspectRatio="xMinYMid meet"
  x="70"
  y="0">
  <use href="#smiley" />
</svg>

<rect x="140" y="0" width="60" height="30">
  <title>xMaxYMid meet</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="60"
  height="30"
  preserveAspectRatio="xMaxYMid meet"
  x="140"
  y="0">
  <use href="#smiley" />
</svg>

</svg>

path {
  fill: yellow;
  stroke: black;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

rect:hover,
rect:active {
  outline: 1px solid red;
}

Использование slice, когда ширина > высоты

В этом примере показано использование slice, когда width элемента больше его height. Представлены три варианта с тремя разными значениями выравнивания: xMidYMin, xMidYMid и xMidYMax.

<svg viewBox="-1 -1 202 57" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path
      id="smiley"
      d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>

<rect x="0" y="15" width="60" height="30">
  <title>xMidYMin slice</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="60"
  height="30"
  preserveAspectRatio="xMidYMin slice"
  x="0"
  y="15">
  <use href="#smiley" />
</svg>

<rect x="70" y="15" width="60" height="30">
  <title>xMidYMid slice</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="60"
  height="30"
  preserveAspectRatio="xMidYMid slice"
  x="70"
  y="15">
  <use href="#smiley" />
</svg>

<rect x="140" y="15" width="60" height="30">
  <title>xMidYMax slice</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="60"
  height="30"
  preserveAspectRatio="xMidYMax slice"
  x="140"
  y="15">
  <use href="#smiley" />
</svg>

</svg>

path {
  fill: yellow;
  stroke: black;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

rect:hover,
rect:active {
  outline: 1px solid red;
}

Использование meet, когда высота > ширины

В этом примере показано использование meet, когда height элемента больше его width. Представлены три варианта с тремя разными значениями выравнивания: xMidYMin, xMidYMid и xMidYMax.

<svg viewBox="-1 -1 202 80" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path
      id="smiley"
      d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>

<rect x="0" y="0" width="30" height="75">
  <title>xMidYMin meet</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="30"
  height="75"
  preserveAspectRatio="xMidYMin meet"
  x="0"
  y="0">
  <use href="#smiley" />
</svg>

<rect x="35" y="0" width="30" height="75">
  <title>xMidYMid meet</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="30"
  height="75"
  preserveAspectRatio="xMidYMid meet"
  x="35"
  y="0">
  <use href="#smiley" />
</svg>

<rect x="70" y="0" width="30" height="75">
  <title>xMidYMax meet</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="30"
  height="75"
  preserveAspectRatio="xMidYMax meet"
  x="70"
  y="0">
  <use href="#smiley" />
</svg>

</svg>

path {
  fill: yellow;
  stroke: black;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

rect:hover,
rect:active {
  outline: 1px solid red;
}

Использование slice, когда высота > ширины

В этом примере показано использование slice, когда height элемента больше его width. Представлены три варианта с тремя разными значениями выравнивания: xMinYMid, xMidYMid и xMaxYMid.

<svg viewBox="-1 -1 202 80" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path
      id="smiley"
      d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>

<rect x="0" y="0" width="30" height="75">
  <title>xMinYMid slice</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="30"
  height="75"
  preserveAspectRatio="xMinYMid slice"
  x="0"
  y="0">
  <use href="#smiley" />
</svg>

<rect x="35" y="0" width="30" height="75">
  <title>xMidYMid slice</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="30"
  height="75"
  preserveAspectRatio="xMidYMid slice"
  x="35"
  y="0">
  <use href="#smiley" />
</svg>

<rect x="70" y="0" width="30" height="75">
  <title>xMaxYMid slice</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="30"
  height="75"
  preserveAspectRatio="xMaxYMid slice"
  x="70"
  y="0">
  <use href="#smiley" />
</svg>

</svg>

path {
  fill: yellow;
  stroke: black;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

rect:hover,
rect:active {
  outline: 1px solid red;
}

Использование значения выравнивания none

В этом примере показан элемент со значением выравнивания none.

<svg viewBox="-1 -1 192 62" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path
      id="smiley"
      d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>

<!-- none -->
<rect x="0" y="0" width="160" height="60">
  <title>none</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="160"
  height="60"
  preserveAspectRatio="none"
  x="0"
  y="0">
  <use href="#smiley" />
</svg>

</svg>

path {
  fill: yellow;
  stroke: black;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

rect:hover,
rect:active {
  outline: 1px solid red;
}

Элементы

Этот атрибут можно использовать со следующими элементами SVG:

  • <svg>
  • <symbol>
  • <image>
  • <feImage>
  • <marker>
  • <pattern>
  • <view>

feImage

Для <feImage> атрибут preserveAspectRatio определяет, как должно вписываться связанное изображение в прямоугольник, заданный элементом <feImage>.

Значение <align> <meetOrSlice>?
Значение по умолчанию xMidYMid meet
Анимируемый Да

image

Для <image> атрибут preserveAspectRatio определяет, как должно вписываться связанное изображение в прямоугольник, заданный элементом <image>.

Значение <align> <meetOrSlice>?
Значение по умолчанию xMidYMid meet
Анимируемый Да

marker

Для <marker> атрибут preserveAspectRatio указывает, нужно ли выполнять равномерное масштабирование, чтобы вписать элемент в область просмотра.

Значение <align> <meetOrSlice>?
Значение по умолчанию xMidYMid meet
Анимируемый Да

pattern

Для <pattern> атрибут preserveAspectRatio указывает, нужно ли выполнять равномерное масштабирование, чтобы вписать элемент в область просмотра.

Значение <align> <meetOrSlice>?
Значение по умолчанию xMidYMid meet
Анимируемый Да

svg

Для <svg> атрибут preserveAspectRatio указывает, нужно ли выполнять равномерное масштабирование, чтобы вписать элемент в область просмотра.

Значение <align> <meetOrSlice>?
Значение по умолчанию xMidYMid meet
Анимируемый Да

symbol

Для <symbol> атрибут preserveAspectRatio указывает, нужно ли выполнять равномерное масштабирование, чтобы вписать элемент в область просмотра.

Значение <align> <meetOrSlice>?
Значение по умолчанию xMidYMid meet
Анимируемый Да

view

Для <view> атрибут preserveAspectRatio указывает, нужно ли выполнять равномерное масштабирование, чтобы вписать элемент в область просмотра.

Значение <align> <meetOrSlice>?
Значение по умолчанию xMidYMid meet
Анимируемый Да

Спецификации

Спецификация
Модуль эффектов фильтров, уровень 1>
# element-attrdef-feimage-preserveaspectratio>
Масштабируемая векторная графика (SVG) 2>
# PreserveAspectRatioAttribute>

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/preserveAspectRatio

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API