旋转 SVG – C# 示例

如何旋转 SVG – C# 代码

使用 Aspose.SVG for .NET 库，您可以通过编程方式执行旋转转换。本文介绍了 SVG 旋转的 C# 示例。考虑在 transform属性中使用 rotate() 函数以及变换矩阵 matrix(a,b,c,d,e,f) 的情况。

旋转()函数

以下 C# 代码片段演示了如何创建 SVG <rect> 元素、设置其属性，并使用rotate() 函数对 transform 属性应用转换。

创建 SVGDocument 类的实例。 RootElement 属性指向文档的根 <svg> 元素。
创建一个带有属性的 <rect> 元素并将其添加到 <svg> 元素中：
- 您可以使用 CreateElementNS() 方法创建 SVGRectElement 类的实例。
- 调用 SetAttribute() 方法设置指定位置、大小、填充和变换的属性。使用 transform属性的rotate()函数，它获取要旋转的角度和要旋转的点的坐标。如果不指定坐标，则围绕初始坐标系的点(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    }

该变换将矩形围绕原始坐标系的点 (0, 0) 旋转 45 度，因为元素需要围绕其旋转的点的坐标未传递给rotate() 函数。为了清楚起见，该图显示了旋转之前和之后的坐标系。这说明旋转变换是通过旋转坐标系来完成的。

文本“原始矩形 (a) 和旋转矩形的图像 (b)。”

旋转 SVG 元素 – SVG 绕中心旋转

以下 C# 代码片段演示了如何在现有 SVG 文件中查找所需的 SVG 元素并旋转它。您应该遵循以下几个步骤：

使用 SVGDocument() 构造函数之一加载源 SVG 文件。
获取文档的根<svg>元素。
使用 QuerySelector() 方法查找第一个要旋转的矩形元素。 Element 类的 QuerySelector(selector) 方法允许您获取文档中与指定选择器匹配的第一个元素。
为矩形元素设置 transform属性，值为rotate(45, 100, 140)。此变换将元素围绕坐标为 (100, 140) 的指定点(选定矩形的中心)旋转 45 度角(顺时针)。
调用 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 元素，必须使用 rotate(angle, cx, cy) 函数，该函数将元素围绕坐标 (cx, cy) 处的点旋转一定角度。确定（计算）图像中心的位置（其坐标）并执行旋转。

旋转 SVG 元素 – 使用 SVG Builder

在这里，我们将看相同的示例：围绕其中心旋转 shapes.svg 文件中的第一个<rect>元素。不过，这一次，我们将使用 SVG Builder 来完成此任务。 SVG Builder API 为开发人员提供了一个强大的工具，用于以简化的方式创建和更新 SVG 元素。在此代码片段中：

GetElementsByTagName() 方法用于从 SVG 文档中检索第一个<rect>元素。
创建一个新的 SVGRectElementBuilder 实例来修改检索到的<rect>元素的属性。
Transform() 方法用于对矩形应用旋转变换。在本例中，矩形围绕指定为旋转中心的点 (100, 140) 旋转 45 度。此转换会改变 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 中的转换使开发人员能够修改 SVG 元素的位置、旋转、缩放和倾斜。 Transform()方法通常采用一个或多个转换函数作为参数，每个函数指定一种特定类型的转换。这些功能包括：

平移 Translate() – 沿 x 和 y 轴移动元素。
旋转 Rotate() – 围绕指定点旋转元素。
缩放 Scale() – 沿 x 和 y 轴缩放元素。
倾斜 SkewX() 和 SkewY() – 分别沿 x 轴和 y 轴倾斜元素。

Transform()方法允许链接多个转换函数以应用更复杂的转换。

文章 SVG Builder API 探讨了 Aspose.SVG Builder API 在 C# 中创建和修改 SVG 元素的功能。 SVG Builder API 旨在简化 C# 中 SVG 元素的创建和更新。您将看到 Fluent Builder Pattern 和 mixin 在 SVG 操作中的效率。您将了解类和方法、专门的构建器以及它们如何简化 SVG 编程。

SVG 变换矩阵 – 旋转矩阵

在这里，我们将查看用于旋转整个 SVG 图像而不是单个元素的 C# 示例，并使用旋转矩阵实现转换。让我们仔细看看应用旋转矩阵的 C# 代码。

使用 SVGDocument() 构造函数之一加载源 SVG 文件。
获取文档的根<svg>元素。

注意： 要将任何转换应用到整个 SVG 图像，您需要将 transform 属性应用到根 <svg> 元素。

使用 SVGGraphicsElement 类的 GetCTM() 方法返回与 <svg> 元素关联的当前变换矩阵 (CTM)。 CTM 表示应用于元素的累积变换，并包括有关可应用于元素的平移、旋转、缩放和倾斜的信息。
获得 CTM 后，使用 Rotate() 方法在当前矩阵上后乘旋转变换并返回结果矩阵。 Rotate(angle) 方法仅采用一个参数 – 角度。此参数是强制性的，表示您要应用的旋转量。
构造一个 transformAttribute – 使用修改后的变换矩阵transformationMatrix中的值构建 2D 变换矩阵的字符串表示形式。矩阵表示法为matrix(a, b, c, d, e, f)。
调用 SetAttribute() 方法，使用 transformAttribute字符串设置<svg>元素的 transform属性。
调用 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 (a) 和旋转图像 (b)。

文本“该图显示原始 SVG (a) 和旋转图像 (b)。”

也可以看看

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

SVG 转换 SVG 缩放