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> ограничивающей рамки элемента с минимальным значением X области просмотра. Выравнивает <min-y> ограничивающей рамки элемента с минимальным значением Y области просмотра.

xMidYMin

Принудительно применяет равномерное масштабирование. Выравнивает среднее значение X ограничивающей рамки элемента со средним значением X области просмотра. Выравнивает <min-y> ограничивающей рамки элемента с минимальным значением Y области просмотра.

xMaxYMin

Принудительно применяет равномерное масштабирование. Выравнивает <min-x>+<width> ограничивающей рамки элемента с максимальным значением X области просмотра. Выравнивает <min-y> ограничивающей рамки элемента с минимальным значением Y области просмотра.

xMinYMid

Принудительно применяет равномерное масштабирование. Выравнивает <min-x> ограничивающей рамки элемента с минимальным значением X области просмотра. Выравнивает среднее значение Y ограничивающей рамки элемента со средним значением Y области просмотра.

xMidYMid

Принудительно применяет равномерное масштабирование. Выравнивает среднее значение X ограничивающей рамки элемента со средним значением X области просмотра. Выравнивает среднее значение Y ограничивающей рамки элемента со средним значением Y области просмотра. Это значение по умолчанию.

xMaxYMid

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

xMinYMax

Принудительно применяет равномерное масштабирование. Выравнивает <min-x> ограничивающей рамки элемента с минимальным значением X области просмотра. Выравнивает <min-y>+<height> ограничивающей рамки элемента с максимальным значением Y области просмотра.

xMidYMax

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

xMaxYMax

Принудительно применяет равномерное масштабирование. Выравнивает <min-x>+<width> ограничивающей рамки элемента с максимальным значением X области просмотра. Выравнивает <min-y>+<height> ограничивающей рамки элемента с максимальным значением Y области просмотра.

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

meet

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

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

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

slice

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

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

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

Примеры

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

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

html
<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>
</svg>
html
<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>
html
<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>
html
  <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>
css
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.

html
<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>
</svg>
html
<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>
html
<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>
html
  <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>
css
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.

html
<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>
</svg>
html
  <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>
html
<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>
html
  <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>
css
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.

html
<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>
</svg>
html
<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>
html
<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>
html
  <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>
css
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.

html
<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>
</svg>
html
  <!-- 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>
css
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–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

Spec-Zone.ru

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