Трансформация в SVG: перемещение

Подготовили: Евгений Рыжков и Тимур Лисица Дата публикации: 15.12.2010

До этого момента все рисунки были отображены «как есть». Но на практике обыденное дело, когда требуется изображение переместить куда-то, как-то перевернуть или изменить масштаб. Для решения этих задач существует атрибут transform. Познакомимся с ним поближе.

В материале «Группирование и привязка SVG объектов» мы познакомились с элементом <use>, который мог вставить группу графических объектов в определенное место. Посмотрим на следующий пример: определяем квадрат (он отобразится в верхнем левом углу координатной сетки), затем повторно рисуем его по координатам (50, 50) (пунктирные линии — просто обозначение границ холста):

<svg width="200px" height="200px" viewBox="0 0 200 200">
<g id="square">
	<rect x="0" y="0" width="20" height="20" style="fill: none; stroke:black; stroke-width: 2;"/>
</g>
<use xlink:href="#square" x="50" y="50"/>
</svg>
элемент use для перемещения

Как выясняется, значение х и у являются одной из кратких форм более общего и более мощного атрибута transform. В данном случае, значения х и у преобразуются в атрибут в такого вида: transform = "translate (x-value,y-value)", где translate — технический чудо-термин для «перемещения». x-value, y-value измеряются в текущей системе координат пользователя. Повторим эффект перемещения из предыдущего примера с помощью translate:

<svg width="200px" height="200px" viewBox="0 0 200 200">
<g id="square">
	<rect x="0" y="0" width="20" height="20" style="fill: none; stroke:black; stroke-width: 2;"/>
</g>
<use xlink:href="#square" transform="translate(50,50)"/>
</svg>

Результат можем лицезреть на следующем рисунке. Визульно результат удовлетворяет, но полагать, что в данном примере используется перемещение фигуры было бы ошибочным.

элемент use для перемещения

«За кулисами» в действительности происходит совсем другая история. Вместо того, чтобы перемещать сам квадрат, translate берет и перемещает всю координатную сетку. Поэтому наш квадрат будет иметь координаты (0, 0):

в реальности translate перемещает координатную сетку

Следует запомнить

Translate не перемещает сам объект, а изменяет положение координатной сетки.

На первый взгляд, использование translate кажется нелепым. Это все равно если бы для того чтобы отставить диван подальше от внешней стены дома, потребовалось переместить всю комнату вместе со стенами. На самом деле не все так плохо. Как оказывается, перемещается не вся координатная сеть общая для всех объектов, а локальная сеть конкретного перемещаемого объекта. Т.е. как бы образуется несколько систем координат.

Да, кстати, translate можно применять не только к <use>, но и к отдельным элементам, а так же к группам:

<svg width="200px" height="200px" viewBox="0 0 200 200">
<rect x="0" y="0" width="20" height="20" style="fill: none; stroke:black; stroke-width: 2" transform="translate(50,50)"/>
</svg>

Посмотреть в живую.

P.S. что будет с координатной сеткой и где она окажется, если применить трансформацию только к одному из многих элементов на холсте, узнаем в последующих материалах.

Куда дальше

Показать комментарии