Трансформация изображений SVG при изменении параметров Viewbox

  1. Введение
  2. SVG viewport
  3. SVG viewBox
  4. Процесс взаимодействия viewport и viewBox
    1. Смещение начала координат viewBox по одной оси
    2. Смещение начала координат viewBox по двум осям
  5. Изменение масштаба с помощью viewBox
    1. Увеличение масштаба 2:1
    2. Уменьшение масштаба 1:2

Введение

Изменение параметров viewBox – атрибута элемента SVG позволяет масштабировать, фрагментировать, перемещать исходное изображение вдоль осей координат. Но довольно часто возникают вопросы: “Почему, изменив параметры viewBox, я получаю совсем не то, что ожидал увидеть?”. Вместо увеличения картинки в 2 раза, она совсем пропадает с дисплея или сдвигается не в ту сторону и т.д. Чтобы разобраться в причинах этих “аномалий” рассмотрим подробно процессы взаимодействия областей просмотра элемента SVG и его параметра viewBox.

Продолжить чтение