编辑 SVG 文件 – C# 示例

Aspose.SVG for .NET 允许您编辑 SVG 文件并更改其内容。 API 的文档对象模型 (DOM) 与官方 SVG 规范 完全兼容，意味着可以完全控制 SVG 节点及其字段进行编辑。您可以通过附加新节点、删除或编辑现有节点的内容来修改文档。

在本文中，我们将展示如何使用 Aspose.SVG for .NET 库编辑 SVG，并考虑如何向 SVG 文档添加元素并编辑它们的详细 C# 示例。

将元素添加到 SVG 文档

Aspose.SVG for .NET API 允许您向文档添加各种元素。首先，您将创建一个新元素或节点；然后，您可以将元素添加到文档中。

1. 您可以使用 SVGDocument 类的 CreateElementNS(namespaceURI, qualifiedName) 方法创建 Element 类的实例 – 给定限定的所需元素名称和命名空间 URI。 namespaceURI 设置对 W3C SVG 规范的引用。 qualifiedName 必须包含元素的字符串标签名称。请记住，您必须使用类型转换(显式转换)来获取相应的元素。

2. 要向 SVG 文档添加元素，API 提供了 Node 类的 InsertBefore(node, child) 方法，该方法在现有子节点之前插入 node 或如果“child”为空，则位于子级列表的末尾。

SVGDocument 类的 RootElement 属性指向文档的根 <svg> 元素。以下代码片段说明了如何创建 <g> 元素并将其添加为 SVG 文档中的第一个子元素。

    var svgElement = document.RootElement;
    var gElement = (SVGGElement)document.CreateElementNS("http://www.w3.org/2000/svg", "g");
    svgElement.InsertBefore(gElement, svgElement.FirstChild);

我们可以使用 Element 类的 SetAttribute(name, value)、 GetAttribute(name)、 HasAttribute(name)、 RemoveAttribute(name) 方法来指定元素属性及其值。

例如，如果您创建一组图形元素并将它们放入<g>元素中，则可以设置公共参数：

    gElement.SetAttribute("fill", "#8A8D8F");
    gElement.SetAttribute("stroke", "magenta");
    gElement.SetAttribute("stroke-width", "4");

如何将基本形状添加到 SVG 文档

可以使用 CreateElementNS(namespaceURI, qualifiedName) 方法创建基本的 SVG 形状。 qualifiedName 必须包含 SVG 图形元素的字符串标记名称。

这样你就可以创建SVG圆形(SVGCircleElement class, qualifiedName = “circle”)，椭圆(SVGEllipseElement class, qualifiedName = “ellipse”)，矩形(SVGRectElement class, qualifiedName = “rect”)，线条(SVGLineElement class, qualifiedName = “line”)、折线(SVGPolylineElement 类，qualifiedName = “polyline”)、多边形(SVGPolygonElement class, qualifiedName = “polygon”)和贝塞尔曲线(SVGPathElement class, qualifiedName = “path”)。

SVG 圆

每个图形元素都有自己特定的属性(property)，通过这些属性可以控制其参数和特性。 Cx, Cy, R 是 SVGAnimatedLength 类型的圆属性，可以通过构造 element.X.BaseVal.Value 来设置或读取其静态数据。

以下代码片段显示了如何创建 SVG 圆圈并将其添加到现有 SVG 文件的 <svg> 元素中：

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Dom;

// Add <circle> element to SVG using C#

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

// Load an SVG document from a file
using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "basic-shapes.svg")))
{
    // Get root <svg> element of the document
    SVGSVGElement svgElement = document.RootElement;

    // Create a <circle> element
    SVGCircleElement circleElement = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle");
    circleElement.Cx.BaseVal.Value = 100F;
    circleElement.Cy.BaseVal.Value = 100F;
    circleElement.R.BaseVal.Value = 50F;
    circleElement.SetAttribute("fill", "Salmon");

    // Add the <circle> element as the first child to <svg> element
    svgElement.InsertBefore(circleElement, svgElement.FirstChild);

    // Work with the document here...
    // Add a polyline and change stroke attributes for all circle and ellipse elements (see later)

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

椭圆 (Cx, Cy, Rx, Ry)，矩形 (X, Y, Width, Height, Rx, Ry) 和直线 (X1, Y1, X2, Y2) 都有自己的属性可以类似地设置。

SVG 折线 – SVG Polyline

SVGPolygonElement 和 SVGPolylineElement 具有 SVGPointList 类型的 Points 属性，该属性提供对 points 属性基本内容的访问，该属性唯一匹配 SVG 语法。

以下代码片段说明了创建 SVG 折线的简单示例：

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

    // Create a <polyline> element and set attributes values:
	var polylineElement = (SVGPolylineElement)document.CreateElementNS(SvgNamespace, "polyline");
    SVGPoint point1 = svgElement.CreateSVGPoint();
    point1.X = 270;
    point1.Y = 240;
    SVGPoint point2 = svgElement.CreateSVGPoint();
    point2.X = 290;
    point2.Y = 220;
    SVGPoint point3 = svgElement.CreateSVGPoint();
    point3.X = 310;
    point3.Y = 240;
    polylineElement.Points.AppendItem(point1);
    polylineElement.Points.AppendItem(point2);
    polylineElement.Points.AppendItem(point3);
    polylineElement.SetAttribute("stroke", "grey");
    polylineElement.SetAttribute("stroke-width", "5");
    polylineElement.SetAttribute("fill", "none");

	// Add the SVG polyline to children of the <svg> element
	svgElement.AppendChild(polylineElement);

CreateSVGPoint() 方法生成 SVGPoint 类的实例，您可以在其中通过同名属性设置 X 和 Y 值。默认对象被初始化为自定义坐标系中的点 (0,0)。

AppendItem(T newItem) 方法在列表末尾插入一个新点。直线连接列表中的这些点并形成折线或多边形 – 由闭合折线形成的平面几何形状。

AppendChild(node) 方法将新子节点添加到该节点的子节点列表的末尾。代码片段显示，指定了 stroke、stroke-width 和 fill 属性，并且 polylineElement 作为最后一个子元素插入到 <svg> 元素中。

考虑编辑现有 SVG 文件 basic-shapes.svg 的示例：我们将添加上述圆形和折线，并更改所有圆形和椭圆形的笔划属性。以下代码片段显示了如何查找 <svg> 元素中的所有圆形和椭圆形并替换它们的描边属性：

    // Set stroke attributes for all <circle> and <ellipse> elements
    foreach (Element element in svgElement.Children)
    {
        if (element is SVGCircleElement || element is SVGEllipseElement)
        {
            element.SetAttribute("stroke-width", "6");
            element.SetAttribute("stroke", "#C8102E");
        }
    }

该图显示了原始 SVG 文件 basic-shapes.svg 和编辑(修改)的文件的可视化。

编辑 SVG 路径 – Edit SVG Path

要使用 Aspose.SVG API 创建 SVG 路径，您需要使用 CreateElementNS(namespaceURI, qualifiedName) 方法创建 SVGPathElement 类的实例。

方法 CreateSVGPathSegMovetoAbs(x, y)、 CreateSVGPathSegCurvetoQuadraticAbs(x, y, x1, y1) 和 CreateSVGPathSegCurvetoQuadraticSmoothAbs(x, y) 采用以下参数路径数据命令“M、C”和“T”作为它们自己的参数。 SVGPathSegList 类型的 PathSegList 属性提供对 d 属性内容的访问，以路径段列表的形式，与 SVG 语法匹配(详细信息请参阅文章 SVG Path Data)。

以下代码片段显示了如何创建 SVG 路径并将其添加到 <svg> 元素中：

    // Create a <path> element
    var pathElement = (SVGPathElement)document.CreateElementNS(SvgNamespace, "path");

	// Set d attribute parameters – SVG path data
	SVGPathSeg pathSeg1 = pathElement.CreateSVGPathSegMovetoAbs(10, 200);
	SVGPathSeg pathSeg2 = pathElement.CreateSVGPathSegCurvetoQuadraticAbs(180, 200, 25, 210);
	SVGPathSeg pathSeg3 = pathElement.CreateSVGPathSegCurvetoQuadraticSmoothAbs(300, 250);
	SVGPathSeg pathSeg4 = pathElement.CreateSVGPathSegCurvetoQuadraticSmoothAbs(420, 250);
	SVGPathSeg pathSeg5 = pathElement.CreateSVGPathSegCurvetoQuadraticSmoothAbs(490, 150);
	pathElement.PathSegList.AppendItem(pathSeg1);
	pathElement.PathSegList.AppendItem(pathSeg2);
	pathElement.PathSegList.AppendItem(pathSeg3);
	pathElement.PathSegList.AppendItem(pathSeg4);
	pathElement.PathSegList.AppendItem(pathSeg5);

	// Set fill and stroke attributes
	pathElement.SetAttribute("stroke", "magenta");
	pathElement.SetAttribute("fill", "none");
	pathElement.SetAttribute("stroke-width", "4");

	// Add the path as the first child in the <svg> element
	svgElement.InsertBefore(pathElement, svgElement.FirstChild);

您可以在 DOM、编程、文档处理和文件导航方面使用此类详细且完整的代码。使用 SetAttribute() 方法，您可以在一行上编写 SVG 路径数据 d 设置的代码。

在下面的示例中，我们使用一行代码创建相同的路径(原始 SVG 路径)。此外，我们将在原始路径中编辑 moveto(x,y) M 和 T(x,y) 命令的参数以接收新路径。

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Paths;

// Edit SVG path data in C# programmatically

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

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

    // Create a <path> element
    SVGPathElement pathElement = (SVGPathElement)document.CreateElementNS(SvgNamespace, "path");

    // Set d attribute parameters – SVG path data
    pathElement.SetAttribute("d", "M 10 200 Q 25 110 180 200 T 300 250 T 420 250 T 490 150");

    // Edit SVG path	
    foreach (SVGPathSeg pathSeg in pathElement.PathSegList)
    {
        // Editing T commands parameters
        if (pathSeg is SVGPathSegCurvetoQuadraticSmoothAbs)
        {
            SVGPathSegCurvetoQuadraticSmoothAbs pathSegCurvetoQuadraticSmoothAbs = pathSeg as SVGPathSegCurvetoQuadraticSmoothAbs;

            pathSegCurvetoQuadraticSmoothAbs.X -= 60;
            pathSegCurvetoQuadraticSmoothAbs.Y -= 65;
        }

        // Editing M command parameters
        if (pathSeg is SVGPathSegMovetoAbs)
        {
            SVGPathSegMovetoAbs pathSegMovetoAbs = pathSeg as SVGPathSegMovetoAbs;

            pathSegMovetoAbs.X = 200;
            pathSegMovetoAbs.Y = 100;
        }
    }
    // Set fill and stroke attributes
    pathElement.SetAttribute("stroke", "red");
    pathElement.SetAttribute("fill", "none");
    pathElement.SetAttribute("stroke-width", "4");

    // Add the <path> element as the first child to the <svg> element
    svgElement.InsertBefore(pathElement, svgElement.FirstChild);

    // Save the document
    document.Save(Path.Combine(OutputDir, "edit-svg-path-data.svg"));
}

该图展示了原始路径(黑色)和修改后的路径(红色)。您可以通过链接 – edit-svg-path-data.svg 查看并保存编辑后的 ​​SVG 文件。

要编辑 SVG 文件，您必须首先在文档中找到要编辑的元素。有多种方法可以做到这一点，例如 CSS 选择器或 XPath 查询。有关如何使用文档导航来编辑 SVG 文件的详细信息，请参阅 Navigation & Inspection SVG 文章。

如果您想更改元素的 SVG 颜色，请参阅 如何更改 SVG 颜色 文章中的详细信息。在这里，您将学习如何使用 Aspose.SVG for .NET 库处理 SVG 颜色，并考虑如何更改元素的 SVG 颜色或更改 SVG 文件中的背景颜色。

在现有位图上绘制 SVG

位图可以用作绘图的背景。您可以附加 SVG 形状、路径或文本。例如，下图是在位图上添加圆圈和文字作为背景而成的：

<svg xmlns="http://www.w3.org/2000/svg">
	<image href="http://docs.aspose.com/svg/images/api/seaside.jpg" height="480" width="640" x="20" y="20"/>
	<text style="font-size: 1.4em;" x="420px" fill="gold" y="280px">The beach is beautiful...</text>
	<circle cx="520" cy="120" r="60" stroke="gold" stroke-width="70" fill="none" stroke-dasharray="2,14"/>
</svg>

以下 C# 代码从头开始创建上面的 SVG 文档。我们向文档添加一些 SVG 元素，例如图像、文本和圆形元素，然后将 SVG 文档保存到文件中：

1. 使用 SVGDocument 类创建 SVG 文档，并使用 RootElement 属性访问根 SVG 元素。
2. 创建一个 <image> 元素，设置所需的属性，并将其添加到 <svg> 元素中。
   • 使用 SVGDocument 类的 CreateElementNS(namespaceURI, qualifiedName) 方法创建 SVGImageElement 类的实例。
   • 使用 SVGAnimatedLength 类型的属性，可以通过构造设置或读取静态数据：element.X.BaseVal.Value：设置href、height、width、x 和y 属性。
3. 以类似的方式，使用 SVGTextElement 类创建一个 <text> 元素并设置所需的属性。使用 Style 属性设置字体大小，使用 SetAttribute(name, value) 方法指定 x、y 和 fill 等属性。
4. 使用 SVGCircleElement 类创建一个 <circle> 元素。 cx、cy 和 r 属性定义圆的中心坐标和半径。其他属性，如stroke, stroke-width, fill 和 stroke-dasharray，用于设置圆形的样式。
5. 使用 AppendChild() 方法将创建的 SVG 元素(imageElement、textElement 和 CircleElement)添加到 SVG 根元素 (svgElement) 的子元素列表的末尾。
6. 调用 Save() 方法将 SVG 文档保存到指定输出目录中命名的文件中。

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Paths;

// SVG Drawing on existing bitmap

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

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

    // Create an <image> element and add it into svgElement
    SVGImageElement imageElement = (SVGImageElement)document.CreateElementNS(SvgNamespace, "image");
    imageElement.Href.BaseVal = "http://docs.aspose.com/svg/images/api/seaside.jpg";
    imageElement.Height.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    imageElement.Width.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    imageElement.Height.BaseVal.Value = 480;
    imageElement.Width.BaseVal.Value = 640;
    imageElement.X.BaseVal.Value = 20;
    imageElement.Y.BaseVal.Value = 20;
    svgElement.AppendChild(imageElement);

    // Create a <text> element, set its attributes, and it into svgElement
    SVGTextElement textElement = (SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
    textElement.Style.FontSize = "1.4em";
    textElement.SetAttribute("x", "420px");
    textElement.SetAttribute("fill", "gold");
    textElement.SetAttribute("y", "280px");
    textElement.TextContent = "The beach is beautiful...";
    svgElement.AppendChild(textElement);

    // Create a <circle> element, set its attributes, and add it into svgElement
    SVGCircleElement circleElement = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle");
    circleElement.Cx.BaseVal.Value = 520;
    circleElement.Cy.BaseVal.Value = 120;
    circleElement.R.BaseVal.Value = 60;
    circleElement.SetAttribute("stroke", "gold");
    circleElement.SetAttribute("stroke-width", "70");
    circleElement.SetAttribute("fill", "none");
    circleElement.SetAttribute("stroke-dasharray", "2,14");
    svgElement.AppendChild(circleElement);

    // Save the document
    document.Save(Path.Combine(OutputDir, "svg-drawing-on-bitmap.svg"));
}

我们使用较大的“笔画宽度”值绘制了 SVG 圆。应用 stroke-dasharray 属性将圆的笔划转换为虚线。通过选择填充未填充区域的值，可以达到所需的视觉效果。有关样式属性属性的更多信息，请参阅文章 SVG 中的填充和描边。

您可以从 GitHub 下载完整的示例和数据文件。关于从 GitHub 下载并运行示例，您可以从 如何运行示例 部分找到。