旋转 SVG – C# 示例

如何旋转 SVG – C# 代码

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

旋转()函数

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

1. 创建 SVGDocument 类的实例。 RootElement 属性指向文档的根 <svg> 元素。
2. 创建一个带有属性的 <rect> 元素并将其添加到 <svg> 元素中：
   • 您可以使用 CreateElementNS() 方法创建 SVGRectElement 类的实例。
   • 调用 SetAttribute() 方法设置指定位置、大小、填充和变换的属性。使用 transform属性的rotate()函数，它获取要旋转的角度和要旋转的点的坐标。如果不指定坐标，则围绕初始坐标系的点(0, 0)进行旋转。
   • 要将 rectElement 添加到 svgElement，您可以使用 AppendChild() 方法。
3. 调用 Save()方法将生成的SVG图像保存到路径指定的本地文件中。

using Aspose.Svg;
using System.IO;

// Rotate an SVG element using the transform attribute programmatically with Aspose.SVG

// Set SVG Namespace URL
string SvgNamespace = "http://www.w3.org/2000/svg";

// 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(SvgNamespace, "rect");
    rectElement.X.BaseVal.Value = 150;
    rectElement.Y.BaseVal.Value = 50;
    rectElement.Width.BaseVal.Value = 100;
    rectElement.Height.BaseVal.Value = 100;
    rectElement.SetAttribute("fill", "purple");

    // Apply rotate() function to the SVG
    rectElement.SetAttribute("transform", "rotate(45)");

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

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

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

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

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

1. 使用 SVGDocument() 构造函数之一加载源 SVG 文件。
2. 获取文档的根<svg>元素。
3. 使用 QuerySelector() 方法查找第一个要旋转的矩形元素。 Element 类的 QuerySelector(selector) 方法允许您获取文档中与指定选择器匹配的第一个元素。
4. 为矩形元素设置 transform属性，值为rotate(45, 100, 140)。此变换将元素围绕坐标为 (100, 140) 的指定点(选定矩形的中心)旋转 45 度角(顺时针)。
5. 调用 Save()方法将生成的SVG图像保存到本地文件。

using Aspose.Svg;
using System.IO;

// Rotate a single selected element in an SVG document using C#

// Load an SVG document from a file
SVGDocument document = new SVGDocument(Path.Combine(DataDir, "shapes.svg"));

// Get the root SVG element of the document
SVGSVGElement svgElement = document.RootElement;

// Get the fist <rect> element for rotation
SVGRectElement rectElement = svgElement.QuerySelector("rect") as SVGRectElement;

// Set a new "transform" attribute with rotation value for the rectangle element
rectElement.SetAttribute("transform", "rotate(45, 100, 140)");

// Save the document
string outputPath = "rotate-element.svg";
document.Save(Path.Combine(OutputDir, outputPath));

下图显示了原始 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() 方法来完成构建过程并将修改应用于元素。

using Aspose.Svg.Builder;
using System.Linq;
using System.IO;

// Rotate a single selected element in an SVG document using SVG Builder API

// Load an SVG document
using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "shapes.svg")))
{
    // Find the first <rect> element for rotation
    SVGRectElement rect = document.GetElementsByTagName("rect").First() as SVGRectElement;

    // Rotate the first <rect> element around its center using the SVGRectElementBuilder
    new SVGRectElementBuilder()
        .Transform(t => t.Rotate(45, 100, 140))
        .Build(rect);

    // Save the document
    document.Save(Path.Combine(OutputDir, "rotate-element-using-builder.svg"));
}

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# 代码。

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

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

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

using Aspose.Svg.Builder;
using System.Linq;
using System.IO;

// Rotate an entire SVG document using a transformation matrix programmatically in C#

// Load an SVG document
string documentPath = Path.Combine(DataDir, "shapes.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.Rotate(45);

    // 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, "rotate-matrix.svg"));
}

下图显示了原始 SVG (a) 和旋转图像 (b)。

也可以看看

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