用 C# 编辑 SVG

学习如何使用 C# 以编程方式编辑 SVG

如何用 C# 编辑 SVG

Aspose.SVG for .NET 库提供了一组类和方法，用于创建、编辑、转换 SVG 文件并进行其他操作。创建文档对象后，就可以在其中填充 SVG 元素。您可以通过添加 SVG 图形、文本、过滤器等更多元素来定制文档。在本文中，我们将探讨两个 C# 示例，它们展示了构建和编辑 SVG 的不同方法：一个使用 Aspose.SVG Builder API ，另一个使用直接设置元素和属性的手动 DOM 操作。

首先，确保您的项目中安装了 Aspose.SVG for .NET API。安装过程非常简单。您可以使用以下命令通过 NuGet 包管理器控制台进行安装：

安装 Aspose.SVG for .NET

Install-Package Aspose.SVG

使用元素构建器向 SVG 文件添加元素

元素生成器是 Aspose.SVG 生成器 API 的专用类，可让您更轻松地在代码中创建和修改 SVG 元素。它们通常使用流畅构建器模式(Fluent Builder Pattern)等模式，为以编程方式设置属性和构建 SVG 内容提供简洁、可读的语法。下面的代码演示了使用 C# 从零开始制作 SVG 的简洁而优雅的方法。该示例利用 SVGSVGElementBuilder 中的 Fluent Builder 模式来构建 SVG 并添加新元素：装饰圆和文本。

使用 Element Builders 编辑 SVG 的 C# 代码

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...
    using (var document = new SVGDocument())
    {
        // Create an <svg> element with specified width, height and viewBox, and add into it other required elements
        var svg = new SVGSVGElementBuilder()
            .Width(700).Height(300)
            .ViewBox(0, 0, 700, 300)

            .AddG(g => g
            .AddCircle(circle => circle.Cx(130).Cy(130).R(60).Fill(Paint.None).Stroke(Color.Salmon).StrokeWidth(70).StrokeDashArray(2,14))
            .AddText("I can add elements to SVG!", x: 270, y: 140, fontSize: 30, fill: Color.DarkRed)
            )
            .Build(document.FirstChild as SVGSVGElement);
        
        // Save the document
        document.Save(Path.Combine(OutputDir, "svg-from-scratch.svg"));
    }

向 SVG 文件添加元素

文档对象模型(DOM)API 提供了对 SVG 节点及其属性的完全控制，并且完全符合官方 SVG 规范。您可以通过添加新节点、删除现有节点或编辑其内容来修改文档。例如，下面是如何在 SVG 中添加装饰圆和文本：

使用底层 DOM 操作编辑 SVG 的 C# 代码

using System.IO;
using Aspose.Html;
...

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

    using (var document = new SVGDocument())
    {
        var svgElement = document.RootElement;

        // Create a text element and set its attributes
        var textElement = (SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
        textElement.Style.FontSize = "2.0em";
        textElement.SetAttribute("x", "270px");
        textElement.SetAttribute("fill", "darkred");
        textElement.SetAttribute("y", "140px");
        textElement.TextContent = "I can add elements to SVG!";

        // Create a circle element and set its attributes
        var circleElement = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle");
        circleElement.Cx.BaseVal.Value = 130;
        circleElement.Cy.BaseVal.Value = 130;
        circleElement.R.BaseVal.Value = 60;
        circleElement.SetAttribute("stroke", "salmon");
        circleElement.SetAttribute("stroke-width", "70");
        circleElement.SetAttribute("fill", "none");
        circleElement.SetAttribute("stroke-dasharray", "2,14");

        // Add the text and circle elements into svgElement
        svgElement.AppendChild(textElement);
        svgElement.AppendChild(circleElement);

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

让我们看一下编辑 SVG 文档的简单步骤，以说明上面的 С# 代码。 SVG <circle> 和 <text> 元素将添加到创建的 SVG 文档中：

要以编程方式从头开始创建 SVG 文档，请使用不带参数的 SVGDocument() 构造函数。
SVGDocument 类的RootElement属性指向文档的根<svg>元素。
创建带有属性的 <text> 和 <circle> 元素，并将它们添加到 <svg> 元素：
- 您可以使用 CreateElementNS() 方法创建 SVGTextElement 和 SVGCircleElement 类的实例。
- 调用 SetAttribute() 方法设置指定位置、大小、填充等的属性。
- 使用 AppendChild() 方法将元素添加到 <svg> 中。
使用 Save() 方法保存编辑后的SVG文件。