SVG 转换 – SVG Transformations – C# 示例

在 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 的几种方法

使用 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 轴倾斜指定的角度。

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

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

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

SVG 转换 – Translate() 函数

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

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

 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 = 50;
13		rectElement.Y.BaseVal.Value = 50;
14		rectElement.Width.BaseVal.Value = 100;
15		rectElement.Height.BaseVal.Value = 100;
16		rectElement.SetAttribute("fill", "blue");
17
18		// Apply translate() function to the rectangle
19		rectElement.SetAttribute("transform", "translate(150, 50)");
20
21		// Append the <rect> element to the <svg> element
22		svgElement.AppendChild(rectElement);
23
24		// Save the document
25		document.Save(Path.Combine(OutputDir, "translate.svg"));
26	}

SVG 变换矩阵

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

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

 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", "blue");
17		svgElement.AppendChild(rectElement);
18
19		// Get the current transformation matrix associated with the rectElement
20		var transformationMatrix = rectElement.GetCTM();
21		transformationMatrix = transformationMatrix.Translate(150, 50);
22
23		// Apply the transformation matrix to the rectElement
24		var transformAttribute = "matrix(" + transformationMatrix.A + "," + transformationMatrix.B + ","
25			+ transformationMatrix.C + "," + transformationMatrix.D + "," + transformationMatrix.E + ","
26			+ transformationMatrix.F + ")";
27		rectElement.SetAttribute("transform", transformAttribute);
28
29		// Save the document
30		document.Save(Path.Combine(OutputDir, "translation-matrix.svg"));
31	}

也可以看看

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

SVG 渐变旋转 SVG