SVG Трансформации – Поворот, масштабирование, перемещение

В SVG трансформации используются для изменения положения, размера, ориентации и наклона элементов SVG на холсте. Объекты SVG можно трансформировать, используя свойства transform атрибута: translate, scale, rotate, skewX, skewY и matrix. Используя библиотеку Aspose.SVG for .NET, вы можете выполнять эти преобразования программно. В этой главе представлен общий обзор того, как вы можете работать с транформациями с помощью Aspose.SVG.

В текущей главе описаны популярные преобразования SVG, а также примеры C# для наиболее распространенных сценариев преобразования.

Поворот SVG – в этой статье рассмотрены примеры C# для поворота SVG. Рассмотрены случаи использования функции rotate() в атрибуте transform, а также матрицы преобразования matrix(a,b,c,d,e,f).
Масштабирование SVG – В этой статье рассмотрены примеры C# для масштабирования SVG.
Трансляция SVG – В этом разделе вы узнаете, как программно перемещать SVG на C#.

Несколько способов трансформации SVG на C#

Использование свойств атрибута transform. Свойства атрибута преобразования в SVG позволяют манипулировать элементами с помощью следующих функций преобразования:

transform=“translate(tx, ty)” – здесь функция translate(tx, ty) перемещает элемент на значение tx по оси x и на ty по оси y. Если одно из значений не указано, по умолчанию оно равно нулю.
- rotate(angle, cx, cy) вращает элемент вокруг указанной точки на заданный угол.
- scale(sx, sy) определяет операцию масштабирования с коэффициентами масштабирования sx и sy. Если sy не указано, предполагается, что оно равно sx.
- skewX(angle) и skewY(angle) наклоняют элемент вдоль оси x или y на указанный угол.

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

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

Эти два способа предлагают разные уровни сложности и точности: атрибут transform проще использовать для простых трансформаций, а матрица трансформации обеспечивает больший контроль над процессом преобразования. Давайте рассмотрим эти методы на примерах C# для трансформации SVG, например для трансляции элемента SVG.

Трансформация SVG – функция Translate()

В следующем фрагменте кода C# показано, как создать элемент SVG <rect>, установить его атрибуты и применить трансформацию трансляции (перевода) с помощью атрибута transform. Преобразование перемещает прямоугольник на 150 единиц вправо и на 50 единиц вниз.

Создайте экземпляр класса SVGDocument. Свойство RootElement указывает на корневой элемент <svg> документа.
Создайте элемент <rect> с атрибутами и добавьте его к элементу <svg>:
- Вы можете использовать метод CreateElementNS() для создания экземпляра класса SVGRectElement.
- Вызовите метод SetAttribute(name, value), чтобы установить атрибуты, определяющие положение, размер, заливку и трансформацию. Атрибут transform устанавливается для элемента <rect> с использованием значения "translate(150, 50)". При этом применяется трансформация трансляции, которае перемещает прямоугольник на 150 единиц вправо и на 50 единиц вниз.
Чтобы добавить rectElement к svgElement, вы можете использовать метод AppendChild().
Вызовите метод Save(), чтобы сохранить полученное изображение SVG в локальный файл.

1using Aspose.Svg;
2using System.IO;

 1// Translate an SVG rectangle using the transform attribute in C#
 2
 3// Create a new SVG document
 4using (SVGDocument document = new SVGDocument())
 5{
 6    SVGSVGElement svgElement = document.RootElement;
 7
 8    // Create a <rect> element and set its attributes
 9    SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS("http://www.w3.org/2000/svg", "rect");
10    rectElement.X.BaseVal.Value = 50;
11    rectElement.Y.BaseVal.Value = 50;
12    rectElement.Width.BaseVal.Value = 100;
13    rectElement.Height.BaseVal.Value = 100;
14    rectElement.SetAttribute("fill", "blue");
15
16    // Apply translate() function to the rectangle
17    rectElement.SetAttribute("transform", "translate(150, 50)");
18
19    // Append the <rect> element to the <svg> element
20    svgElement.AppendChild(rectElement);
21
22    // Save the document
23    document.Save(Path.Combine(OutputDir, "translate.svg"));
24}

Example-TranslateSvg.cs hosted with ❤ by GitHub

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

Здесь мы рассмотрим пример C#, аналогичный приведенному выше: создадим элемент SVG <rect>, установим его атрибуты и реализуем трансляцию с использованием матрицы трансформации. Давайте подробнее рассмотрим код C# для реализации матрицы трансформации.

Используйте метод GetCTM() класса SVGGraphicsElement, который возвращает текущую матрицу преобразования (CTM), связанную с элементом <rect>. CTM представляет совокупные преобразования, примененные к элементу, и включает информацию о перемещении, вращении, масштабировании и наклоне, которые можно применить к элементу.
После получения CTM используйте метод Translate(), который умножает трансформации перевода на текущую матрицу и возвращает результирующую матрицу. Метод Translate(dx, dy) принимает два аргумента – dx и dy, представляющие расстояния горизонтального и вертикального перемещения соответственно.
Создайте transformAttribute – строковое представление двумерной матрицы преобразования, используя значения из модифицированного transformationMatrix. Матричное обозначение: matrix(a, b, c, d, e, f).
Вызовите метод SetAttribute(), чтобы установить атрибут transform элемента <rect>.

1using Aspose.Svg;
2using System.IO;

 1// Translate an SVG element using a transformation matrix in C#
 2
 3// Create a new SVG document
 4using (SVGDocument document = new SVGDocument())
 5{
 6    SVGSVGElement svgElement = document.RootElement;
 7
 8    // Create a <rect> element and set its attributes
 9    SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS("http://www.w3.org/2000/svg", "rect");
10    rectElement.X.BaseVal.Value = 150;
11    rectElement.Y.BaseVal.Value = 50;
12    rectElement.Width.BaseVal.Value = 100;
13    rectElement.Height.BaseVal.Value = 100;
14    rectElement.SetAttribute("fill", "blue");
15    svgElement.AppendChild(rectElement);
16
17    // Get the current transformation matrix associated with the rectElement
18    SVGMatrix transformationMatrix = rectElement.GetCTM();
19    transformationMatrix = transformationMatrix.Translate(150, 50);
20
21    // Apply the transformation matrix to the rectElement
22    string transformAttribute = "matrix(" + transformationMatrix.A + "," + transformationMatrix.B + ","
23                                + transformationMatrix.C + "," + transformationMatrix.D + "," + transformationMatrix.E + ","
24                                + transformationMatrix.F + ")";
25    rectElement.SetAttribute("transform", transformAttribute);
26
27    // Save the document
28    document.Save(Path.Combine(OutputDir, "translation-matrix.svg"));
29}

Example-SvgTranslationMatrix.cs hosted with ❤ by GitHub

Смотрите также

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

Работа с цветами SVG Поворот SVG