ViewBox

При рисовании фигуры мы не ограничены пространством. Считайте, что у нас есть бесконечный холст и мы можем нарисовать круг в любом месте. Но наш монитор имеет ограниченный размер, поэтому фигура должна "попасть" в видимый прямоугольник. Считайте viewBox (регистр важен) таким ограничивающим прямоугольником. Например, зададим ограничивающую область 200 на 100 единиц с началом координат (0, 0), которая находится в верхней левой точке. Единицы измерения и начало координат являются условными понятиями, чтобы было от чего отталкиваться.

<svg viewBox="0 0 200 100">

Для демонстрации примера нарисуем круг в некоторой позиции. Для удобства изменим фон области.

.box {
  width: 50%;
  display: block;
  background: hsl(230, 90%, 80%);
}

<svg viewBox="0 0 200 100" class="box">
  <circle r="50"></circle>
</svg>

Для экономии места в примере не используются пространства имён, браузер Chrome справляется с этим.

Мы задали фигуру Круг с радиусом 50 единиц, но не указали координаты. В результате центр круга разместился в точке (0, 0), а мы увидели только часть круга в области viewBox, хотя где-то в памяти компьютера был нарисован честный круг.

Если мы уменьшим размер viewBox в два раза с 200х100 на 100х50, то увидим, что круг увелится.

<svg viewBox="0 0 100 50" class="box">
  <circle r="50"></circle>
</svg>

Общий размер контейнера останется прежним, так как мы задали размеры в процентах у CSS. Тут главное понять, что viewBox работает в своём измерении. Не изменяя размеры круга, мы увидели, что круг увеличился. По сути, viewBox работает как масштабирование объекта.

Части фигуры, которые выходят за пределы viewBox, обрезаются и мы их не видим.

Впрочем мы может задать координаты кругу. Попробуем.

<svg viewBox="0 0 100 50" class="box">
    <circle cx="118" cy="56" r="20" fill="red" />
</svg>

Если приглядеться, то в правом нижнем углу можно увидеть фрагмент красного круга. Очевидно, что мы не слишком удачно выбрали координаты. Исправимся. Заодно увеличим масштаб.

<svg viewBox="0 0 200 120" class="box">
    <circle cx="150" cy="120" r="20" fill="red" />
</svg>

Уже лучше. Похоже на восход или закат солнца.

Напомню ещё раз, что в действительно круг рисуется полностью и вы можете использовать его в анимациях, чтобы увидеть его полный размер. Более того, можно показать и этот круг видимым, через CSS, используя overflow:visible.

<svg viewBox="0 0 200 120" style="overflow:visible" class="box">
    <circle cx="150" cy="120" r="20" fill="red" />
</svg>

Также можно использовать отрицательные значения. Допустим, есть такой вариант со стандартной точкой отсчёта (0, 0).

<svg viewBox="0 0 500 100" class="box">
    <circle cx="50" cy="0" r="50" fill="red" />
</svg>

Не будем менять координаты круга, а изменим координаты у viewBox.

<svg viewBox="-10 -50 500 100" class="box">
    <circle cx="50" cy="0" r="50" fill="red" />
</svg>

При этом нужно помнить, что сама точка отсчёта у SVG не меняется и круг без указания координат будет рисоваться в точке (0, 0).

Дополнительные материалы

Источник

Вернуться в раздел SVG

Реклама