Масштабирование SVG – SVG Scaling – C#

Как масштабировать SVG – код C#

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

Функция Scale()

Масштабирование (scale) – это преобразование SVG, которое увеличивает или уменьшает объект с использованием коэффициента масштабирования. Следует различать равномерное и направленное масштабирование. Функция трансформации scale(sx, sy) позволяет масштабировать изображения по осям x и y. Значение коэффициента масштабирования sy не является обязательным, и если оно опущено, предполагается, что оно равно sx.

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

1. Создайте экземпляр класса SVGDocument. Свойство RootElement указывает на корневой элемент <svg> документа.
2. Создайте элемент <circle> и установите необходимые атрибуты.
   • Вы можете использовать метод CreateElementNS() для создания экземпляра класса SVGCircleElement.
   • Вызовите метод SetAttribute(), чтобы установить атрибуты, определяющие положение, размер, заливку и преобразование. Используйте функцию scale() для атрибута transform, который определяет преобразование масштабирования. В частности, scale(2) означает масштабирование элемента <circle> в 2 раза как по координатам x, так и по y.
3. Чтобы добавить circleElement в svgElement, вы можете использовать метод AppendChild().
4. Вызовите метод Save(), чтобы сохранить полученное изображение SVG в локальный файл.

using Aspose.Svg;
using System.IO;
...

    // Create a new SVG document
	using (var document = new SVGDocument())
	{
		var svgElement = document.RootElement;

		// Create a rect element and set its attributes
		var circleElement = (SVGCircleElement)document.CreateElementNS("http://www.w3.org/2000/svg", "circle");
		circleElement.Cx.BaseVal.Value = 100;
		circleElement.Cy.BaseVal.Value = 100;
		circleElement.R.BaseVal.Value = 50;
		circleElement.SetAttribute("fill", "salmon");

		// Apply scaling to the SVG circle
		circleElement.SetAttribute("transform", "scale(2)");

		// Append the rect element to the SVG
		svgElement.AppendChild(circleElement);

		// Save the document
		document.Save(Path.Combine(OutputDir, "scale-circle.svg"));
    }

Матрица трансформации SVG – матрица масштабирования

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

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

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

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

using Aspose.Svg;
using System.IO;
...

	// Load an SVG document
	string documentPath = Path.Combine(DataDir, "snowflake.svg");

	using (var document = new SVGDocument(documentPath))
	{
		var svgElement = document.RootElement;

		// Get the transformation matrix associated with the svgElement
		var transformationMatrix = svgElement.GetCTM();
		transformationMatrix = transformationMatrix.Scale(0.5F);

		// Apply the transformation matrix to the svgElement
		var transformAttribute = "matrix(" + transformationMatrix.A + "," + transformationMatrix.B + ","
			+ transformationMatrix.C + "," + transformationMatrix.D + "," + transformationMatrix.E + ","
			+ transformationMatrix.F + ")";
		svgElement.SetAttribute("transform", transformAttribute);

		// Save the document
		document.Save(Path.Combine(OutputDir, "scale-svg.svg"));
	}

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

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

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