Главная/ Учимся Javascript, CSS, HTML/ Уроки SVG/ Svg Essentials/ Последовательность трансформаций в SVG

Последовательность трансформаций в SVG

Дата публикации: 18.12.2010

Для объекта количество возможных трансформаций не ограничивается одной: можно задать несколько. Для этого атрибуту transform задаем несколько значений через пробел. В следующем примере представлен прямоугольник, который подвергнем двум трансформациям: translation и scaling. Оси тут нарисованы для демонстрации как именно прямоугольник переместился.

<!-- рисуем оси -->
<line x1="0" y1="0" x2="0" y2="100" style="stroke: gray;"/>
<line x1="0" y1="0" x2="100" y2="0" style="stroke: gray;"/>

<rect x="10" y="10" height="20" width="15" transform="translate(30, 20) scale(2)" style="fill: gray;"/>

Ниже вариант применение трансформаций к вложенным группам:

<g transform="translate(30, 20)">
	<g transform="scale(2)">
		<rect x="10" y="10" height="20" width="15" style="fill: gray;"/>
	</g>
</g>

Оба эти варианта дадут одинаковый результат:

последовательность трансформаций

Рассмотрим каждый шаг трансформаций в отдельности:

последовательность трансформаций по шагам

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

Порядок, в котором выполняется последовательность трансформаций, влияет на конечный результат. Трансформация А следующая за В не даст вам тот же самый результат, что и трансформация В следующая за трансформацией А.

Для этого возьмем тот же прямоугольник и применим к нему сначала последовательность translate -> scale (на рисунке он серый). Затем возьмем его «брата-близнеца» и применим scale -> translate (черный):


<line x1="0" y1="0" x2="0" y2="100" style="stroke: gray;"/>
<line x1="0" y1="0" x2="100" y2="0" style="stroke: gray;"/>

<rect x="10" y="10" width="20" height="15" transform="translate(30, 20) scale(2)" style="fill: #ccc;"/>
<rect x="10" y="10" width="20" height="15" transform="scale(2) translate(30, 20)" style="fill: black;"/>

Результат в живую или на рисунке:

результат зависит от последовательности трансформаций

Причиной отличия результата в данном случае является то, что первой применялось масштабирование. Перенос выполнялся уже в увеличенной системе координат.

последовательность трансформаций: масштабирование потом перенос

Куда дальше

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