Масштабирование 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;

// Scale an SVG circle using the transform attribute with Aspose.SVG

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

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

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

    // Append the <circle> 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;

// Combine multiple SVG transformations (scale, translate, and rotate) using a transformation matrix with Aspose.SVG

// Load an SVG document
string documentPath = Path.Combine(DataDir, "snowflake.svg");
using (SVGDocument document = new SVGDocument(documentPath))
{
    SVGSVGElement svgElement = document.RootElement;

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

    // Apply the transformation matrix to the svgElement
    string 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-snowflake.svg"));
}

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

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

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