Поворот SVG – Rotate SVG – примеры C#

Как повернуть SVG – код C#

Используя Библиотеку Aspose.SVG for .NET, вы можете программно выполнить трансформацию поворота. В этой статье рассматриваются C# примеры для поворота SVG. Здесь вы найдете случаи использования функции rotate() в атрибуте transform, а также матрицы преобразования matrix(a,b,c,d,e,f).

Функция Rotate()

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

Создайте экземпляр класса SVGDocument. Свойство RootElement указывает на корневой элемент <svg> документа.
Создайте элемент <rect> с атрибутами и добавьте его к элементу <svg>:
- Вы можете использовать метод CreateElementNS() для создания экземпляра класса SVGRectElement.
- Вызовите метод SetAttribute(), чтобы установить атрибуты, определяющие положение, размер, заливку и преобразование. Используйте функцию rotate() для атрибута transform, который принимает угол поворота и координаты точки, вокруг которой необходимо повернуть. Если координаты не указаны, то вращение будет производиться вокруг точки (0, 0) исходной системы координат.
- Чтобы добавить 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 = 150;
13        rectElement.Y.BaseVal.Value = 50;
14        rectElement.Width.BaseVal.Value = 100;
15        rectElement.Height.BaseVal.Value = 100;
16        rectElement.SetAttribute("fill", "purple");
17
18        // Apply rotate() function to the SVG
19        rectElement.SetAttribute("transform", "rotate(45)");
20
21        // Append the rect element to the SVG
22        svgElement.AppendChild(rectElement);
23
24        // Save the document
25        string outputPath = "rotate-svg-rect.svg";
26        document.Save(Path.Combine(OutputDir, outputPath));
27    }

Преобразование поворачивает прямоугольник на 45 градусов вокруг точки (0, 0) исходной системы координат, поскольку координаты точки, вокруг которой нужно повернуть элемент, не были переданы в функцию rotate(). Для наглядности на рисунке показаны системы координат до и после вращения. Это показывает, что преобразование вращения выполняется путем вращения системы координат.

Text «Исходный прямоугольник (a) и изображение с повернутым прямоугольником (b)».

Поворот элемента SVG – Поворот SVG вокруг центра

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

Загрузите исходный файл SVG, используя один из конструкторов SVGDocument().
Получите корневой элемент <svg> документа.
Используйте метод QuerySelector(), чтобы найти первый прямоугольный элемент, который нужно повернуть. Метод QuerySelector(selector) класса Element позволяет получить первый элемент в документе, соответствующий указанному селектору.
Установите атрибут transform со значением Rotate(45, 100, 140) для прямоугольного элемента. Это преобразование поворачивает элемент на угол 45 градусов (по часовой стрелке) вокруг указанной точки (центра выделенного прямоугольника) с координатами (100, 140).
Вызовите метод Save(), чтобы сохранить полученное изображение SVG в локальный файл.

 1using Aspose.Svg;
 2using System.IO;
 3...
 4    // Load an SVG document from a file
 5    var document = new SVGDocument(Path.Combine(DataDir, "shapes.svg"));
 6    
 7    // Get root <svg> element of the document
 8    var svgElement = document.RootElement;
 9
10    // Get <rect> element to rotate
11    var rectElement = svgElement.QuerySelector("rect") as SVGRectElement;
12
13    // Set a new "transform" attribute using rotate() function for the rectangle element
14    rectElement.SetAttribute("transform", "rotate(45, 100, 140)");
15    
16    // Save the document
17    document.Save(Path.Combine(OutputDir, "rotate-element.svg"));

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

Text «Исходное изображение svg (a) и изображение с повернутым первым прямоугольным элементом (b).»

Примечание. Чтобы SVG элемент повернулся вокруг cвоего центра или какой-либо другой точки, вы должны использовать функцию rotate(angle, cx, cy), которая поворачивает элемент на угол вокруг точки с координатами (cx, cy). Определите (рассчитайте) положение центра изображения – его координаты – и выполняйте поворот.

Поворот элемента SVG – использование SVG Builder

Здесь мы рассмотрим тот же пример: вращение первого элемента <rect> в файле shapes.svg вокруг его центра. Однако на этот раз мы выполним эту задачу с помощью SVG Builder. SVG Builder API предлагает разработчикам мощный инструмент для упрощенного создания и обновления элементов SVG. В этом фрагменте кода:

Метод GetElementsByTagName() используется для получения первого элемента <rect> из документа SVG.
Создается новый экземпляр SVGRectElementBuilder для изменения свойств полученного элемента <rect>.
Метод Transform() используется для применения преобразования вращения (поворота) к прямоугольнику. В этом случае прямоугольник поворачивается на 45 градусов вокруг точки (100, 140), указанной как центр вращения. Это преобразование изменяет ориентацию прямоугольника в документе SVG.
После настройки элемента <rect> с желаемым преобразованием вызывается метод Build() для завершения процесса построения и применения изменений к элементу.

 1using Aspose.Svg.Builder;
 2using System.Linq;
 3using System.IO;
 4...
 5    // Load an SVG document
 6    using (var document = new SVGDocument(Path.Combine(DataDir, "shapes.svg")))
 7    {
 8        // Find the first <rect> element for rotation
 9        var rect = document.GetElementsByTagName("rect").First() as SVGRectElement;
10
11        // Rotate the first <rect> element around its center using the SVGRectElementBuilder
12        new SVGRectElementBuilder()
13            .Transform(t => t.Rotate(45, 100, 140))
14            .Build(rect);
15
16        // Save the document
17        document.Save(Path.Combine(OutputDir, "rotate-element-using-builder.svg"));
18    }

Метод Transform() является частью SVG Builder API, который позволяет разработчикам программно применять трансформации к элементам SVG. Вы можете изменять положение, поворот, масштаб и наклон элементов SVG. Метод Transform() обычно принимает в качестве аргументов одну или несколько функций трансформации, каждая из которых определяет определенный тип преобразования. Эти функции включают в себя:

Трансляцию Translate() – перемещает элемент по осям x и y.
Поворот Rotate() – вращает элемент вокруг указанной точки.
Масштабирование Scale() – масштабирует элемент по осям x и y.
Наклон SkewX() и SkewY() – наклоняет элемент по осям x и y соответственно.

Метод Transform() позволяет объединять несколько функций преобразования для применения более сложных преобразований.

В статье SVG Builder API рассматриваются возможности Aspose.SVG Builder API для создания и изменения элементов SVG на C#. SVG Builder API предназначен для упрощения создания и обновления элементов SVG на C#. Вы увидите эффективность шаблона Fluent Builder и миксинов при манипуляциях с SVG. Вы узнаете о классах и методах, специализированных сборщиках и о том, как они упрощают программирование SVG.

Матрица преобразования SVG – Матрица поворота

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

Загрузите исходный файл SVG, используя один из конструкторов SVGDocument().
Получите корневой элемент <svg> документа.

Примечание. Чтобы применить какое-либо преобразование ко всему SVG-изображению, вам необходимо применить атрибут transform к корневому элементу <svg>.

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

 1using Aspose.Svg;
 2using System.IO;
 3...
 4
 5	// Load an SVG document
 6    using (var document = new SVGDocument(Path.Combine(DataDir, "shapes.svg")))
 7    {
 8        var svgElement = document.RootElement;
 9
10        // Get the transformation matrix associated with the svgElement
11        var transformationMatrix = svgElement.GetCTM();
12        transformationMatrix = transformationMatrix.Rotate(45);
13
14        // Apply the transformation matrix to the svgElement
15        var transformAttribute = "matrix(" + transformationMatrix.A + "," + transformationMatrix.B + ","
16            + transformationMatrix.C + "," + transformationMatrix.D + "," + transformationMatrix.E + ","
17            + transformationMatrix.F + ")";
18        svgElement.SetAttribute("transform", transformAttribute);
19
20        // Save the document
21        document.Save(Path.Combine(OutputDir, "rotate.svg"));
22    }

На следующем рисунке показаны исходный SVG (а) и повернутое изображение (b).

Text «На рисунке показан исходный SVG (a) и повернутое изображение (b)».

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

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

SVG Трансформации Масштабирование SVG