viewBox

Атрибут viewBox определяет положение и размеры области просмотра SVG в пространстве пользователя.

Значение атрибута viewBox представляет собой список из четырёх чисел, разделенных пробелами и/или запятыми: min-x, min-y, width, и height. min-x и min-y обозначают минимальные координаты X и Y, которые может иметь viewBox (координаты начала viewBox), а width и height определяют размеры viewBox. Результирующая область viewBox представляет собой прямоугольник в пространстве пользователя, сопоставленный с границами области просмотра элемента SVG (а не области просмотра браузера). Когда SVG содержит атрибут viewBox (часто в сочетании с атрибутом preserveAspectRatio), происходит преобразование, растягивающее или изменяющее размер области просмотра SVG для соответствия определённому контейнерному элементу.

Элементы

Вы можете использовать этот атрибут с элементами SVG, описанными в разделах ниже.

`<marker>`

Для <marker>, viewBox определяет положение и размеры содержимого элемента <marker>.

Значение	<number>,? <number>,? <number>,? <number>
Значение по умолчанию	none
Анимируемо	Да

`<pattern>`

Для <pattern>, viewBox определяет положение и размеры содержимого плитки узора.

Значение	<number>,? <number>,? <number>,? <number>
Значение по умолчанию	none
Анимируемо	Да

`<svg>`

Для <svg>, viewBox определяет положение и размеры содержимого элемента <svg>.

Значение	<number>,? <number>,? <number>,? <number>
Значение по умолчанию	none
Анимируемо	Да

`<symbol>`

Для <symbol>, viewBox определяет положение и размеры содержимого элемента <symbol>.

Значение	<number>,? <number>,? <number>,? <number>
Значение по умолчанию	none
Анимируемо	Да

`<view>`

Для <view>, viewBox определяет положение и размеры содержимого элемента <view>.

Значение	<number>,? <number>,? <number>,? <number>
Значение по умолчанию	none
Анимируемо	Да

Примеры

Ниже приведен фрагмент кода, включающий три <svg> с различными значениями атрибута viewbox и идентичными дочерними элементами <rect> и <circle>, что создает совершенно разные результаты. Размер <rect> определяется с помощью относительных единиц, поэтому визуальный размер квадрата остаётся неизменным независимо от значения viewBox. Длина радиуса r атрибута <circle> одинакова в каждом случае, но это значение в пользовательских единицах разрешается относительно размера, определённого в viewBox, что приводит к разным результатам в каждом случае.

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" />
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" />
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" />
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

Пользовательские единицы r="4" разрешаются относительно размеров viewBox, что приводит к существенно разным размерам кругов. Точный эффект атрибута viewbox зависит от атрибута preserveAspectRatio.

Примечание: Значения для width или height, меньшие или равные 0, отключают отображение элемента.

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

Спецификация
Scalable Vector Graphics (SVG) 2 # ViewBoxAttribute

© 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/viewBox