Матрица Трансформации – примеры кода SVG

Масштабируемая векторная графика (SVG) – это язык XML для создания двумерной векторной и смешанной векторно-растровой графики. А матрица трансформации – это матрица, преобразующая один вектор в другой вектор в процессе умножения матрицы. Таким образом, это удобный инструмент для применения преобразований SVG, таких как трансляция, поворот, масштабирование и наклон. Матрицы трансформации основаны на линейной алгебре, которая предлагает математически элегантный способ выражения сложных преобразований. Эта математическая основа упрощает работу с трансформациями SVG для разработчиков и дизайнеров с математическим образованием.

Давайте подробнее посмотрим, как это работает!

Матрица трансформации

Матрица трансформации имеет размер 3x3 и объединяет преобразования перемещения, масштабирования, вращения и наклона. Вот что представляет собой каждый элемент:

Text «Формула матрицы трансформации 3x3»

a – это может быть коэффициент масштабирования в направлении x, обычно обозначаемый как sx, или значение косинуса cos(α) угла поворота
b – это может быть tan(α) skewing factor в направлении y или синусоидальное значение sin(α) угла поворота
c – это может быть tan(α) skewing factor в направлении x или синусоидальное значение -sin(α) угла поворота
d – это может быть коэффициент масштабирования в направлении y, обычно обозначаемый как sy, или значение косинуса cos(α) угла поворота
e – сдвиг (трансляция) по оси x обычно обозначается как tx
f – сдвиг по оси Y обычно обозначается как ty

Матрица трансформации позволяет получить новые координаты точек объекта (x new, y new) в ходе преобразования путем умножения их на значения предыдущих координат (x prev, y prev):

Text «Формула расчета координат с использованием матрицы трансформации»

Объекты SVG можно изменить, используя свойство матрицы в transform атрибуте: transform=“matrix(a,b,c,d,e,f)”. Можно указать только первые 6 значений. Таким образом, вы предоставляете 6 значений функции матричного преобразования для установки трансляции, масштабирования, вращения и наклона.

Матрица трансляции – Translation Matrix

translation – это трансформация в SVG, которая перемещает все точки объекта на одинаковое расстояние по параллельным линиям. Это преобразование смещает начало системы координат элемента. Матрица трансляции (переноса, сдвига) выглядит следующим образом:

Text «Формула матрицы трансляции

matrix(1,0,0,1,tx,ty)

Матрица трансляции объединяет значения tx и ty для перемещения элемента по горизонтали и вертикали. Она смещает объект на tx по оси X и на ty по оси Y.

Посмотрите на пример с исходным синим прямоугольником, который перемещается вдоль оси X (красный), оси Y (оранжевый) и обеих (зеленый):

 1<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
 2    <g fill="none">
 3        <!-- no translation -->
 4        <circle cx="15" cy="15" r="10" stroke="blue" /> 
 5        <!-- horizontal translation by tx=30 -->
 6        <circle cx="15" cy="15" r="10" stroke="red" transform="matrix(1 0 0 1 30 0)" />
 7        <!-- vertical translation by by ty=25 -->
 8        <circle cx="15" cy="15" r="10" stroke="orange" transform="matrix(1 0 0 1 0 25)" />
 9        <!-- both horizontal and vertical translation by tx=30 and by ty=25 -->
10        <circle cx="15" cy="15" r="10" stroke="green" transform="matrix(1 0 0 1 30 25)" />
11    </g>
12</svg>

Действие атрибута transform=“matrix(1,0,0,1,tx,ty)” означает изменение координат объекта по формуле:

x(new) = a·x(prev) + b·y(prev) +e = x(prev) + tx
y(new) = b·x(prev) + d·y(prev) +f = y(prev) + ty

В примере кода элемент <g> используется для группировки окружностей. Атрибут fill применяется внутри <g> ко всем фигурам один раз. Вот полученное изображение:

Четыре окружности как иллюстрация трансформации трансляции

Матрица масштабирования – Scaling Matrix

Масштабирование – это преобразование SVG, которое увеличивает или уменьшает объект с использованием коэффициента масштабирования. Матрица масштабирования используется для равномерного или неравномерного масштабирования объектов по осям координат. sx и sy – коэффициенты масштабирования для осей x и y. Если sx и sy больше 1, объект будет увеличен; если они находятся между 0 и 1, объект будет уменьшен. Если для масштабных коэффициентов установлены разные значения, масштаб объекта будет неравномерным, что приведет к эффекту растяжения или сжатия.

Матрица масштабирования выглядит следующим образом: Text «Формула матрицы масштабирования»

matrix(sx,0,0,sy,0,0)

Посмотрите на пример с исходным синим прямоугольником, который масштабируется равномерно и неравномерно относительно начала координат (0, 0) – рисунки a и b, и масштабируется равномерно относительно точки (10, 10) – рисунок c:

 1<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
 2	<!-- uniform scale is shown in fig.a -->
 3	<g fill="none">
 4	    <rect x="10" y="10" width="20" height="20" stroke="blue" />  
 5		 <rect x="10" y="10" width="20" height="20" stroke="red" transform="matrix(1.5, 0, 0, 1.5, 0, 0)" />
 6		 <rect x="10" y="10" width="20" height="20" stroke="orange" transform="matrix(2, 0, 0, 2, 0, 0)" />
 7		 <rect x="10" y="10" width="20" height="20" stroke="green" transform="matrix(0.7, 0, 0, 0.7, 0, 0)" />
 8	 </g>
 9	 <!-- non-uniform scale is shown in fig.b -->
10	 <g transform="translate(70)">
11		<rect x="10" y="10" width="20" height="20" fill="blue" />  
12		<rect x="10" y="10" width="20" height="20" fill="red" transform="matrix(1.5, 0, 0, 2, 0, 0)" />
13		<rect x="10" y="10" width="20" height="20" fill="orange" transform="matrix(3, 0, 0, 2.5, 0, 0)" />
14		<rect x="10" y="10" width="20" height="20" fill="green" transform="matrix(0.7, 0, 0, 0.5, 0, 0)" />
15	 </g>
16	 <!-- uniform scale relative to point (10, 10) is shown in fig.c -->
17	 <g fill="none" transform="translate(170)">
18	    <rect x="10" y="10" width="20" height="20" stroke="blue" />
19	    <rect x="10" y="10" width="20" height="20" stroke="red" transform="matrix(1.5, 0, 0, 1.5, -5, -5)" />
20	    <rect x="10" y="10" width="20" height="20" stroke="orange" transform="matrix(2, 0, 0, 2, -10, -10)" />
21	    <rect x="10" y="10" width="20" height="20" stroke="green" transform="matrix(0.7, 0, 0, 0.7, 3, 3)" />
22	 </g>
23</svg>

Вот полученное изображение:

Четыре прямоугольника как иллюстрация трансформации масштабирования

В приведенном выше коде используется матрица масштабирования. Первая группа прямоугольников на рисунке отображает пример равномерного масштабирования (рис. а), вторая группа иллюстрирует неравномерное масштабирование (рис. b), а третья группа прямоугольников (рис. c) показывает равномерное масштабирование относительно точки (10 , 10) – левый верхний угол синего (исходного) прямоугольника.

Примечание: Масштабирование выполняется относительно начала координат (0, 0) системы координат. Если точка (cx, cy) объекта SVG (относительно которого он нарисован) не находится в начале координат, применение трансформации масштабирования сместит положение объекта, что может создать впечатление перемещения. Эффект смещения прямоугольников мы видим на рисунках а и b.

Чтобы масштабироваться вокруг определенной точки (сx, сy), необходимо применить к масштабируемой фигуре дополнительное перемещение, чтобы поместить ее в эту точку (рис. c). Полная матрица трансформации, сочетающая перевод и масштабирование:

matrix(sx,0,0,sy,cx·(1-sx),cy·(1-sy))

Эта матрица будет правильно масштабировать объект вокруг точки поворота (cx, cy) без какого-либо перемещения. Коэффициенты cx·(1-sx) и cy·(1-sy) обеспечивают необходимое перемещение, чтобы гарантировать, что объект останется в исходном положении после масштабирования. Рассчитаем эти значения для красного прямоугольника (рис. c). Точкой поворота (cx, cy) в этом примере является (10, 10) – верхний левый угол синего (начального) прямоугольника:

cx·(1-sx)=10·(1-1,5)=10·(-0,5)=-5
cy·(1-sy)=10·(1-1,5)=10·(-0,5)=-5

Вы можете изменить размер SVG на C#, используя Aspose.SVG для .NET API. В статье Масштабирование SVG — Примеры C# рассматриваются примеры C# для масштабирования SVG. Вы найдете случаи использования функции scale() в атрибуте transform, а также матрицы преобразования – matrix(a,b,c,d,e,f).

Матрица поворота – Rotation Matrix

Если вам нравится практиковаться в вычислении синусов и косинусов, вам сюда! Матрица вращения (поворота) выглядит следующим образом:

Text “Формула матрицы вращения”

matrix(cos(α),sin(α),-sin(α),cos(α),0,0), где α – угол вокруг точки с координатами (0, 0) исходной системы координат.

Посмотрите на пример с исходным синим прямоугольником, который повернут на 90° (зеленый), 180° (серый), 270° (бирюзовый), -45° (красный) и 135° (оранжевый):

 1<svg viewBox="-50 -50 200 200" xmlns="http://www.w3.org/2000/svg">
 2	<!-- rotation around point with coordinates (0, 0) is shown in fig.a -->
 3    <g>
 4	  <rect x="0" y="0" width="20" height="20" fill="blue" />
 5	  <rect x="0" y="0" width="20" height="20" fill="green" transform="matrix(0, 1, -1, 0, 0, 0)" />
 6	  <rect x="0" y="0" width="20" height="20" fill="grey" transform="matrix(-1, 0, 0, -1, 0, 0)" />
 7	  <rect x="0" y="0" width="20" height="20" fill="teal" transform="matrix(0, -1, 1, 0, 0, 0)" />
 8	  <rect x="0" y="0" width="20" height="20" fill="red" transform="matrix(0.7071, -0.7071, 0.7071, 0.7071, 0, 0)" />
 9	  <rect x="0" y="0" width="20" height="20" fill="orange" transform="matrix(-0.7071, 0.7071, -0.7071, -0.7071, 0, 0)" />
10	<!-- rotation around point with coordinates (0, 0) is shown in fig.b -->
11    </g>
12	<g transform="translate(70)">
13	  <rect x="5" y="5" width="20" height="20" fill="blue" />
14	  <rect x="5" y="5" width="20" height="20" fill="green" transform="matrix(0, 1, -1, 0, 0, 0)" />
15	  <rect x="5" y="5" width="20" height="20" fill="grey" transform="matrix(-1, 0, 0, -1, 0, 0)" />
16	  <rect x="5" y="5" width="20" height="20" fill="teal" transform="matrix(0, -1, 1, 0, 0, 0)" />
17	  <rect x="5" y="5" width="20" height="20" fill="red" transform="matrix(0.7071, -0.7071, 0.7071, 0.7071, 0, 0)" /> 
18	  <rect x="5" y="5" width="20" height="20" fill="orange" transform="matrix(-0.7071, 0.7071, -0.7071, -0.7071, 0, 0)" />
19	</g>
20    <!-- rotation around point with coordinates (5, 5) is shown in fig.c -->
21	<g transform="translate(140)">
22	  <rect x="5" y="5" width="20" height="20" fill="blue" />
23	  <rect x="5" y="5" width="20" height="20" fill="green" transform="matrix(0, 1, -1, 0, 10, 0)" />
24	  <rect x="5" y="5" width="20" height="20" fill="grey" transform="matrix(-1, 0, 0, -1, 10, 10)" />
25	  <rect x="5" y="5" width="20" height="20" fill="teal" transform="matrix(0, -1, 1, 0, 0, 10)" />
26	  <rect x="5" y="5" width="20" height="20" fill="red" transform="matrix(0.7071, -0.7071, 0.7071, 0.7071, -2, 5)" /> 
27	  <rect x="5" y="5" width="20" height="20" fill="orange" transform="matrix(-0.7071, 0.7071, -0.7071, -0.7071, 12, 5)" />
28	</g>
29</svg>

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

Результат вращения SVG можно увидеть на рисунке:

Шесть прямоугольников как иллюстрация трансформации вращения

На рис. a показывает случай, когда верхний левый угол синего (начального) прямоугольника (0, 0) соответствует исходной точке системы координат (0, 0).
На рис. b иллюстрирует случай, когда верхний левый угол синего (начального) прямоугольника (5, 5) не совпадает с начальной точкой (0, 0). На этом рисунке показаны оси xy исходной системы координат, которые действительны для всех фигур a, b и c. Кроме того, красным показаны оси x’-y’ системы координат красного прямоугольника, который повернут на 45 градусов против часовой стрелки α=-45°. Отсюда ясно видно, что вращение прямоугольника сводится к вращению системы координат.
На рис. c показан случай, когда левый верхний угол синего (начального) прямоугольника (5, 5) не совпадает с начальной точкой системы координат (0, 0), но вращение происходит вокруг точки (5, 5).

Примечание. Следующая матрица будет вращать объект вокруг точки поворота (cx, cy):

matrix(cos(α), sin(α), -sin(α), cos(α), cx·(1-cos(α))+cy·sin(α), cy·(1-cos (α))-cx·sin(α))

Коэффициенты cx·(1-cos(α))+cy·sin(α) и cy·(1-cos(α))-cx·sin(α) обрабатывают необходимый перевод, чтобы гарантировать, что объект останется в исходном положении после вращения. Рассчитаем эти значения для красного прямоугольника (рис. c). Точкой поворота (cx, cy) в этом примере является (5, 5) – верхний левый угол синего (начального) прямоугольника, а угол красного прямоугольника равен -45°:

cos(-45°)=0,7071, sin(-45°)=-0,7071

cx·(1-cos(α))+cy·sin(α)=5·(1-0,7071)+5·(-0,7071)=-2
cy·(1-cos(α))-cx·sin(α)=5·(1-0,7071)-5·(-0,7071)=5

Вы можете поворачивать (вращать) SVG на C#, используя Aspose.SVG для .NET API. В статье Поворот SVG — Примеры C# рассматриваются примеры C# для поворота SVG. Рассмотрены случаи использования функции rotate() в атрибуте transform и матрицы преобразования — matrix(a,b,c,d,e,f).

Матрица наклона – Skewing Matrix

Наклон (перекос) – это преобразование, которое поворачивает одну из осей системы координат элемента на определенный угол α по или против часовой стрелки. Элементы SVG можно искажать с помощью матрицы наклона, которая выглядит следующим образом:

Text “Формула матрицы наклона для трансформации по оси X”

matrix(1,0,tan(α),1,0,0) – эта матрица наклона задает преобразование наклона вдоль оси x на α градусов.

Text “Формула матрицы наклона для трансформации по оси Y”

matrix(1,tan(α),0,1,0,0) – эта матрица наклона задает преобразование наклона вдоль оси Y на α градусов.

Вот пример круга с трансформацией наклона (перекоса):

 1<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
 2	<g fill="none">
 3		<circle cx="20" cy="20" r="10" stroke="blue" />
 4		<!-- skew transformation along the x-axis by α=45° -->
 5		<circle cx="20" cy="20" r="10" stroke="red" transform="matrix(1,0,1,1,0,0)" />
 6	</g>
 7	<g fill="none" transform="translate(70)">
 8		<circle cx="20" cy="20" r="10" stroke="blue" />
 9		<!-- skew transformation along the y-axis by α=45° -->
10		<circle cx="20" cy="20" r="10" stroke="orange" transform="matrix(1,1,0,1,0,0)" />
11	</g>
12</svg>

Отрисованный пример выглядит так:

Исходная окружность и окружность после применения трансформации наклона

Примечание. Значение угла α указывает наклон SVG в градусах вдоль соответствующей оси. При использовании трансформации наклона вдоль оси x изменяется только координата x точек фигуры, но координата y остается неизменной. Преобразование наклона вдоль оси X придает вертикальным линиям вид, будто они повернуты на заданный угол. Координата x каждой точки изменяется на значение, пропорциональное заданному углу и расстоянию до начала координат.

Заключение

Матрица трансформации SVG – мощный инструмент для управления и анимации объектов в SVG. Она предоставляет универсальный способ применения перемещения, вращения, масштабирования и наклона к формам и элементам, позволяя создавать визуально динамичную и интерактивную графику. Матрица позволяет выполнять как отдельные, так и комбинированные трансформации, обеспечивая гибкость для достижения сложных и замысловатых визуальных эффектов. В этой статье мы рассмотрели только отдельные преобразования, но вскоре постараемся расширить наше руководство по рисованию SVG новыми статьями с более сложными примерами.

Чтобы узнать больше и получить примеры кода SVG для вращения, масштабирования, перемещения и наклона графики SVG с использованием transform атрибута SVG, перейдите к статье SVG Трансформации.
Прочтите статью Трансформации SVG – примеры C#, чтобы получить примеры кода C# для поворота, масштабирования, трансляции и наклона графики SVG с использованием библиотеки Aspose.SVG для .NET.
Aspose.SVG предлагает бесплатные веб-приложения SVG для конвертации файлов SVG или изображений, объединения файлов SVG, векторизации изображений, генерации спрайтов SVG, кодирования данных SVG в base64 и многого другого. Эти онлайн-приложения работают в любой операционной системе с веб-браузером и не требуют установки дополнительного программного обеспечения. Это быстрый и простой способ эффективно и результативно решить ваши задачи, связанные с SVG!

Основные Трансформации SVG Заливка и обводка в SVG