SVG 转换 – 旋转、缩放和平移 SVG

在 SVG 中，变换用于修改 SVG 画布内 SVG 元素的位置、大小、方向和倾斜。可以使用变换属性的属性来变换 SVG 对象：translate, scale, rotate, skewX, skewY 和 matrix。使用 Aspose.SVG for .NET 库，您可以通过编程方式执行这些转换。本章概述了如何使用 Aspose.SVG 进行转换。

当前章节介绍了流行的 SVG 转换，以及最常见转换场景的 C# 示例。

• 旋转 SVG – 本文介绍了 SVG 旋转的 C# 示例。考虑在 transform属性中使用 rotate() 函数以及变换矩阵 matrix(a,b,c,d,e,f) 的情况。
• SVG 缩放 – 本文介绍了 SVG 缩放的 C# 示例。
• 翻译 SVG – 在本节中，您将学习如何在 C# 中以编程方式翻译 SVG。

在 C# 中转换 SVG 的几种方法

1. 使用 transform属性。 SVG 中的变换属性允许您使用以下变换函数来操作元素：

• transform=“translate(tx, ty)” – 此处 translate(tx, ty) 函数将元素沿 x 轴移动 tx 值，并沿 y 轴移动 ty 值。如果未指定其中一个值，则默认为零。
  • rotate(angle, cx, cy) 将元素绕指定点旋转给定角度。
  • scale(sx, sy) 指定具有缩放因子 sx 和 sy 的缩放操作。如果未提供 sy，则假定它等于 sx。
  • skewX(angle) 和 skewY(angle) 将元素沿 x 或 y 轴倾斜指定的角度。

2. 使用变换矩阵。 变换矩阵 是描述 SVG 变换的数学方法。该矩阵包含缩放、旋转、倾斜和平移的值，为复杂的转换提供了更大的灵活性。变换矩阵结合了平移、缩放、旋转和倾斜变换。

• transform=“matrix(a,b,c,d,e,f)” – SVG 对象可以使用 transform 属性的矩阵属性进行更改。只能指定矩阵的前 6 个值来设置平移、缩放、旋转和倾斜。

这两种方式提供了不同级别的复杂性和精度，transform属性更容易进行简单变换，而变换矩阵允许对变换过程进行更好的控制。让我们使用 C# 示例来了解这些用于 SVG 转换的方法，例如 SVG 翻译。

SVG 转换 – Translate() 函数

以下 C# 代码片段演示了如何创建 SVG <rect> 元素、设置其属性以及使用 transform 属性应用平移转换。变换将矩形向右移动 150 个单位，向下移动 50 个单位。

1. 创建 SVGDocument 类的实例。 RootElement 属性指向文档的根 <svg> 元素。
2. 创建一个带有属性的 <rect> 元素并将其添加到 <svg> 元素中：
   • 您可以使用 CreateElementNS() 方法创建 SVGRectElement 类的实例。
   • 调用 SetAttribute(name, value) 方法设置指定位置、大小、填充和变换的属性。使用值translate(150, 50)在 <rect>元素上设置 transform属性。这将应用平移变换，将矩形向右移动 150 个单位，向下移动 50 个单位。
3. 要将 rectElement 添加到 svgElement，可以使用 AppendChild() 方法。
4. 调用 Save()方法将生成的SVG图像保存到path指定的本地文件中。

using Aspose.Svg;
using System.IO;

// Translate an SVG rectangle using the transform attribute in C#

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

    // Create a <rect> element and set its attributes
    SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS("http://www.w3.org/2000/svg", "rect");
    rectElement.X.BaseVal.Value = 50;
    rectElement.Y.BaseVal.Value = 50;
    rectElement.Width.BaseVal.Value = 100;
    rectElement.Height.BaseVal.Value = 100;
    rectElement.SetAttribute("fill", "blue");

    // Apply translate() function to the rectangle
    rectElement.SetAttribute("transform", "translate(150, 50)");

    // Append the <rect> element to the <svg> element
    svgElement.AppendChild(rectElement);

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

SVG 变换矩阵

在这里，我们将看一下上面的 C# 示例 – 创建一个 SVG <rect> 元素，设置其属性，并使用转换矩阵实现转换。让我们仔细看看实现变换矩阵的 C# 代码。

1. 使用 SVGGraphicsElement 类的 GetCTM() 方法返回与 <rect> 元素关联的当前变换矩阵 (CTM)。 CTM 表示应用于元素的累积变换，并包括有关可应用于元素的平移、旋转、缩放和倾斜的信息。
2. 获得CTM后，使用 Translate()方法在当前矩阵上后乘平移变换并返回结果矩阵。 Translate(dx, dy) 方法采用两个参数 – dx 和 dy – 分别表示水平和垂直平移距离。
3. 构造一个 transformAttribute – 使用修改后的“transformationMatrix”中的值构建 2D 变换矩阵的字符串表示形式。矩阵表示法为matrix(a, b, c, d, e, f)。
4. 调用 SetAttribute() 方法，使用 transformAttribute字符串设置 <rect>元素的 transform属性。

using Aspose.Svg;
using System.IO;

// Translate an SVG element using a transformation matrix in C#

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

    // Create a <rect> element and set its attributes
    SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS("http://www.w3.org/2000/svg", "rect");
    rectElement.X.BaseVal.Value = 150;
    rectElement.Y.BaseVal.Value = 50;
    rectElement.Width.BaseVal.Value = 100;
    rectElement.Height.BaseVal.Value = 100;
    rectElement.SetAttribute("fill", "blue");
    svgElement.AppendChild(rectElement);

    // Get the current transformation matrix associated with the rectElement
    SVGMatrix transformationMatrix = rectElement.GetCTM();
    transformationMatrix = transformationMatrix.Translate(150, 50);

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

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

也可以看看

您可以从 GitHub 下载完整的示例和数据文件。
关于从 GitHub 下载并运行示例，您可以从 如何运行示例 部分找到。
要了解如何使用变换矩阵来旋转、缩放、平移和倾斜 SVG 图形并考虑 SVG 代码示例，请转到 变换矩阵 – SVG 代码示例 文章。
阅读 SVG 变换 文章了解更多信息并获取使用 SVG 变换属性旋转、缩放、移动和倾斜 SVG 图形的 SVG 代码示例。