SVG 缩放 – C# 示例
Contents
[
Hide
Show
]如何缩放 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
属性应用转换。
- 创建
SVGDocument 类的实例。
RootElement
属性指向文档的根<svg>
元素。 - 创建一个
<circle>
元素并设置所需的属性。- 您可以使用 CreateElementNS() 方法创建 SVGCircleElement 类的实例。
- 调用
SetAttribute() 方法设置指定位置、大小、填充和变换的属性。对指定缩放变换的
transform
属性使用scale()
函数。特别是,“scale(2)”表示将<circle>
元素在 x 和 y 维度上缩放 2 倍。
- 要将
circleElement
添加到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 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# 代码。
- 使用 SVGDocument() 构造函数之一加载源 SVG 文件。
- 获取文档的根
<svg>
元素。
- 注意: 要将任何转换应用到整个 SVG 图像,您需要将
transform
属性应用到根<svg>
元素。
- 使用 SVGGraphicsElement 类的
GetCTM() 方法返回与
<svg>
元素关联的当前变换矩阵 (CTM)。 CTM 表示应用于元素的累积变换,并包括有关可应用于元素的平移、缩放、缩放和倾斜的信息。 - 获得 CTM 后,使用 Scale() 方法在当前矩阵上后乘缩放变换并返回结果矩阵。 Scale(scaleFactor) 方法仅采用一个参数 – scaleFactor。此参数是强制性的,表示您要应用的 x 轴和 y 轴缩放比例。
- 构造一个
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 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)。
也可以看看
- 您可以从
GitHub 下载完整的示例和数据文件。
- 关于从 GitHub 下载并运行示例,您可以从
如何运行示例 部分找到。
- 要了解如何使用变换矩阵来旋转、缩放、平移和倾斜 SVG 图形并考虑 SVG 代码示例,请参阅
变换矩阵 – SVG 代码示例 文章。
- 阅读 SVG 变换 文章以了解更多信息并获取使用 SVG 变换属性旋转、缩放、移动和倾斜 SVG 图形的 SVG 代码示例。