viewBox

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

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

Пример

html, body, svg {
  height:100%
}

svg:not(:root) {
  display: inline-block;
}
html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!--
  С относительными единицами, такими как проценты,
  размер квадрата не меняется в зависимости от
  значения viewBox
  -->
  <rect x="0" y="0" width="100%" height="100%" />

  <!--
  При больших значениях viewBox круг получается
  маленьким, потому что его радиус указан в абсолютных
  единицах: расстояние 4 получается маленьким относительно
  размера окна 100, указанного во viewBox
  -->
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Также не зависит от viewBox, как и в предыдущем примере -->
  <rect x="0" y="0" width="100%" height="100%" />

  <!--
  С маленьким значением размера viewBox круг получается
  большим, потому что радиус 4 намного больше, если размер
  области отображения равен 10, чем если он равен 100
  -->
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
  <!--
  Точка с координатами (0, 0) теперь является центром области
  отображения. 100% всё ещё приравнивается к полному размеру
  области отображения (10 на 10), поэтому квадрат выглядит
  сдвинутым в правый нижний угол
  -->
  <rect x="0" y="0" width="100%" height="100%" />

  <!--
  Так как точка (0, 0) находится в центре, а координаты круга,
  равные 50%, относительно размера области отображения (10 на 10)
  принимаются равными 5, круг оказывается с центром
  в правом нижнем углу
  -->
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

На отображение с viewBox также влияет атрибут preserveAspectRatio.

Примечание: При значениях width и height меньших или равных 0 элемент не отображается

Пять элементов используют этот атрибут: <marker>, <pattern>, <svg>, <symbol> и <view>.

marker

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

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

pattern

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

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

svg

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

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

symbol

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

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

view

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

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

Смотрите также