SVG Трансформации – примеры C#

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

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

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

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

SVG-градиенты Поворот SVG