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指定的本地文件中。

using Aspose.Svg;
using System.IO;

// Scale an SVG circle using the transform attribute with Aspose.SVG

// Create a new SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

    // Create a <circle> element and set its attributes
    SVGCircleElement circleElement = (SVGCircleElement)document.CreateElementNS("http://www.w3.org/2000/svg", "circle");
    circleElement.Cx.BaseVal.Value = 150;
    circleElement.Cy.BaseVal.Value = 150;
    circleElement.R.BaseVal.Value = 50;
    circleElement.SetAttribute("fill", "salmon");

    // Apply scaling to the SVG circle
    circleElement.SetAttribute("transform", "scale(2)");

    // Append the <circle> element to the SVG
    svgElement.AppendChild(circleElement);

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

SVG 变换矩阵 – 比例矩阵

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

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

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

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

using Aspose.Svg;
using System.IO;

// Combine multiple SVG transformations (scale, translate, and rotate) using a transformation matrix with Aspose.SVG

// Load an SVG document
string documentPath = Path.Combine(DataDir, "snowflake.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.Scale(0.5F);

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

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

也可以看看

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