SVG 缩放 – C# 示例

如何缩放 SVG – C# 代码

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

Scale() 函数

缩放是一种 SVG 变换,它使用缩放因子放大或缩小对象。你必须区分均匀缩放和定向缩放。 scale(sx, sy)变换函数允许沿 x 轴和 y 轴缩放图像。 sy缩放因子值是可选的,如果省略,则假定等于sx

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

  1. 创建 SVGDocument 类的实例。 RootElement 属性指向文档的根 <svg> 元素。
  2. 创建一个 <circle>元素并设置所需的属性。
    • 您可以使用 CreateElementNS() 方法创建 SVGCircleElement 类的实例。
    • 调用 SetAttribute() 方法设置指定位置、大小、填充和变换的属性。对指定缩放变换的 transform属性使用scale()函数。特别是,“scale(2)”表示将 <circle>元素在 x 和 y 维度上缩放 2 倍。
  3. 要将 circleElement 添加到 svgElement,可以使用 AppendChild() 方法。
  4. 调用 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 circleElement = (SVGCircleElement)document.CreateElementNS("http://www.w3.org/2000/svg", "circle");
12		circleElement.Cx.BaseVal.Value = 100;
13		circleElement.Cy.BaseVal.Value = 100;
14		circleElement.R.BaseVal.Value = 50;
15		circleElement.SetAttribute("fill", "salmon");
16
17		// Apply scaling to the SVG circle
18		circleElement.SetAttribute("transform", "scale(2)");
19
20		// Append the rect element to the SVG
21		svgElement.AppendChild(circleElement);
22
23		// Save the document
24		document.Save(Path.Combine(OutputDir, "scale-circle.svg"));
25    }

SVG 变换矩阵 – 比例矩阵

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

  1. 使用 SVGDocument() 构造函数之一加载源 SVG 文件。
  2. 获取文档的根<svg>元素。
  1. 使用 SVGGraphicsElement 类的 GetCTM() 方法返回与 <svg> 元素关联的当前变换矩阵 (CTM)。 CTM 表示应用于元素的累积变换,并包括有关可应用于元素的平移、缩放、缩放和倾斜的信息。
  2. 获得 CTM 后,使用 Scale() 方法在当前矩阵上后乘缩放变换并返回结果矩阵。 Scale(scaleFactor) 方法仅采用一个参数 – scaleFactor。此参数是强制性的,表示您要应用的 x 轴和 y 轴缩放比例。
  3. 构造一个 transformAttribute – 使用修改后的变换矩阵“transformationMatrix”中的值构建 2D 变换矩阵的字符串表示形式。矩阵表示法为matrix(a, b, c, d, e, f)
  4. 调用 SetAttribute() 方法,使用 transformAttribute字符串设置 <svg>元素的 transform属性。
  5. 调用 Save()方法将生成的SVG图像保存到本地文件。
 1using Aspose.Svg;
 2using System.IO;
 3...
 4
 5	// Load an SVG document
 6	string documentPath = Path.Combine(DataDir, "snowflake.svg");
 7
 8	using (var document = new SVGDocument(documentPath))
 9	{
10		var svgElement = document.RootElement;
11
12		// Get the transformation matrix associated with the svgElement
13		var transformationMatrix = svgElement.GetCTM();
14		transformationMatrix = transformationMatrix.Scale(0.5F);
15
16		// Apply the transformation matrix to the svgElement
17		var transformAttribute = "matrix(" + transformationMatrix.A + "," + transformationMatrix.B + ","
18			+ transformationMatrix.C + "," + transformationMatrix.D + "," + transformationMatrix.E + ","
19			+ transformationMatrix.F + ")";
20		svgElement.SetAttribute("transform", transformAttribute);
21
22		// Save the document
23		document.Save(Path.Combine(OutputDir, "scale-svg.svg"));
24	}

下图显示了原始 SVG (a) 和缩放因子为 0.5 的缩放图像 – 缩小图像 (b)。

文本“该图显示了原始 SVG (a) 和缩放后的图像 (b)。”

也可以看看

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

Get monthly newsletters & offers directly delivered to your mailbox.