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.

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