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

До этого момента все рисунки были отображены «как есть». Но на практике обыденное дело, когда требуется изображение переместить куда-то, как-то перевернуть или изменить масштаб. Для решения этих задач существует атрибут 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>

Как выясняется, значение х и у являются одной из кратких форм более общего и более мощного атрибута 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>

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

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

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

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. что будет с координатной сеткой и где она окажется, если применить трансформацию только к одному из многих элементов на холсте, узнаем в последующих материалах.

Куда дальше

• следующая — Трансформация в SVG: масштабирование
• предыдущая — Группирование и привязка SVG объектов
• содержание