使用 C# 在 SVG 中填充和描边

SVG（可缩放矢量图形）是一种基于 XML 的 Web 友好矢量文件格式。它用于在网页上显示视觉信息。 SVG 图像在不改变图像质量的情况下是可扩展的。在本文中，我们将学习如何使用 C# 在 SVG 中处理填充和描边。

本文将涵盖以下主题：

1. 在 SVG 中填充和描边的 C# API
2. 什么是 SVG 填充
3. 什么是 SVG 描边
4. SVG 中的笔触和填充
5. SVG 中的填充和描边圆
6. SVG 中的填充和描边路径
7. 使用样式应用填充和描边

在 SVG 中填充和描边的 C# API

为了在 C# 中使用 SVG 的填充和描边属性，我们将使用 Aspose.SVG for .NET API。它允许加载、解析、渲染、创建 SVG 文件并将其转换为 流行格式，而无需任何软件依赖。

API 的 SVGDocument 类代表 SVG 层次结构的根并保存整个内容。此类的 Save() 方法允许将 SVG 保存到指定的文件路径。 QuerySelector() 方法返回文档中与选择器匹配的第一个元素。 API 支持使用流行的形状，例如矩形、圆形、椭圆、直线、折线等。API 提供了单独的类来表示这些支持的形状，例如圆形的 SVGCircleElement、多边形的 SVGPolygonElement 等。

请下载 DLL API 或使用 NuGet 安装它。

PM> Install-Package Aspose.SVG

什么是 SVG 填充？

fill 属性是基本的 SVG 表示属性之一，用于设置轮廓内形状的颜色。

我们可以定义以下填充属性：

• 填充：设置要填充的颜色。如果没有填充，请指定无或透明。
• fill-opacity：将不透明度值设置在 0 到 1 之间。
• 填充规则：定义如何确定形状的内部区域，例如非零、偶数。

什么是 SVG 中风？

stroke 属性定义 SVG 形状的轮廓或边框。描边表示属性设置形状轮廓的颜色。

我们可以设置以下笔画属性：

• stroke：设置颜色值。
• stroke-dasharray：指定虚线类型。
• 冲程冲程偏移
• stroke-linecap：控制线条末端的形状，例如对接、方形和圆形。
• stroke-linejoin：指定两条线如何连接，例如斜接、斜切和圆形。
• stroke-miterlimit：如果使用，必须大于或等于 1。
• stroke-opacity：将不透明度值设置在 0 到 1 之间。
• stroke-width：设置宽度。

SVG 中的填充和描边

填充和描边都用于为 SVG 中的图形添加颜色、渐变或图案。填充绘制 SVG 元素的内部，而描边绘制其轮廓。我们可以在样式属性中同时指定填充和描边，或者将它们用作表示属性。

我们可以在 style 属性中设置 SVG 填充和 SVG 描边，如下图：

style="stroke:#00ff00; stroke-width:2; fill:#ff0000"

我们还可以在演示属性中使用相同的样式属性，如下所示：

stroke="green" stroke-width="2" fill="#ff0000"

为了指定 SVG 颜色，我们可以使用红色、蓝色等颜色名称。我们也可以使用 RGB 值或 HEX 值作为颜色。

C# 中的填充和描边圆

我们可以按照以下步骤设置圆形的 SVG 填充和 SVG 描边属性：

1. 首先，使用 SVGDocument 类加载现有的 SVG。
2. 接下来，获取文档的根元素。
3. 然后，使用 QuerySelectorAll() 方法查找所有圆形元素。
4. 之后，为选定的 SVGCircleElement 设置填充属性。
5. （可选）设置选定 SVGCircleElement 的笔触属性。
6. 最后，使用 Save() 方法保存输出的 SVG 图像。

以下代码示例展示了如何在 C# 中为 SVG 的圆形元素设置填充和描边。

// 此代码示例演示如何在 C# 中为 SVG 的圆形元素设置填充和描边属性。
// 加载现有的 SVG 图像
var document = new SVGDocument(@"C:\Files\SVG\Circle.svg");

// 获取文档的根 SVG 元素
var svgElement = document.RootElement;

// 查找 g 元素中的所有圆元素
NodeList circleNodes = svgElement.QuerySelectorAll("circle");

// 获取第一个圆形元素
SVGCircleElement circleElement = circleNodes[0] as SVGCircleElement;

// 设置填充属性
circleElement.SetAttribute("fill", "#0F0");
circleElement.SetAttribute("fill-opacity", "0.3");

// 设置笔触属性
circleElement.SetAttribute("stroke", "#508484");
circleElement.SetAttribute("stroke-width", "10");

// 保存 SVG
document.Save(@"C:\Files\SVG\Fill-Circle.svg");

请在下面找到 Circle.svg 图像的内容。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<g stroke="black">
		<circle r="30" cx="50" cy="35" fill="none"/>
    </g>
</svg>

这是 Fill-Circle.svg 图像的内容。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<g stroke="black">
		<circle r="30" cx="50" cy="35" fill="#0F0" fill-opacity="0.3" stroke="#508484" stroke-width="10"/>
    </g>
</svg>

C# 中的填充和描边路径

我们可以按照以下步骤为 SVG 中的路径元素设置 SVG 填充和 SVG 描边属性：

1. 首先，使用 SVGDocument 类加载现有的 SVG。
2. 接下来，获取文档的根元素。
3. 然后，使用 QuerySelector() 方法获取路径元素。
4. 之后，为选定的 SVGPathElement 设置填充属性。
5. （可选）设置选定 SVGPathElement 的笔触属性。
6. 最后，使用 Save() 方法保存输出的 SVG 图像。

以下代码示例展示了如何在 C# 中为 SVG 的路径元素设置填充和描边。

// 此代码示例演示如何在 C# 中为 SVG 的路径元素设置填充和描边属性。
// 加载现有的 SVG 图像
var document = new SVGDocument(@"C:\Files\SVG\Sample-Path.svg");

// 获取文档的根 SVG 元素
var svgElement = document.RootElement;

// 获取第一个路径元素
SVGPathElement lineElement = svgElement.QuerySelector("path:nth-child(1)") as SVGPathElement;

// 设置填充属性
lineElement.SetAttribute("fill", "orange");
lineElement.SetAttribute("fill-opacity", "0.6");

// 设置笔触属性
lineElement.SetAttribute("stroke", "#508484");
lineElement.SetAttribute("stroke-width", "10");

// 保存 SVG
document.Save(@"C:\Files\SVG\Fill-Path.svg");

请在下面找到 Sample-Path.svg 图像的内容。

<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
	<g stroke="black">
		<path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="red" stroke-width="3" fill="none" />
    </g>
</svg>

请在下面找到 Fill-Path.svg 图像的内容。

<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
	<g stroke="black">
		<path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="#508484" stroke-width="10" fill="orange" fill-opacity="0.6"/>
    </g>
</svg>

在 C# 中使用样式应用填充和描边

我们还可以按照以下步骤使用 CSS 样式属性应用 SVG 填充和 SVG 描边属性：

1. 首先，创建 SVGDocument 类的实例。
2. 接下来，获取文档的根元素。
3. 然后，使用 CreateElementNS() 方法创建一个圆形元素。
4. 接下来，设置圆的基本属性，例如 Cx、Cy 和 R。
5. 然后，使用 SetAttribute() 方法应用样式属性。
6. 之后，使用 AppendChild() 方法附加孩子。
7. 最后，使用 Save() 方法保存输出的 SVG 图像。

以下代码示例展示了如何在 C# 中使用 CSS 样式应用填充和描边。

// 此代码示例演示如何使用 C# 中的 CSS 样式应用填充和描边属性。
// 创建一个新的 SVG
using (var document = new SVGDocument())
{
    // 获取文档的根 SVG 元素
    var svgElement = document.RootElement;

    const string @namespace = "http://www.w3.org/2000/svg";
    
    // 添加圈子
    var circle = (SVGCircleElement)document.CreateElementNS(@namespace, "circle");
    circle.Cx.BaseVal.Value = 50;
    circle.Cy.BaseVal.Value = 50;
    circle.R.BaseVal.Value = 40;
    
    // 设置样式属性
    circle.SetAttribute("style", "fill:blue; stroke:#fb6796; stroke-width:5");
    
    // 将圆添加到根元素
    svgElement.AppendChild(circle);
    
    // 保存 SVG
    document.Save(@"C:\Files\SVG\ApplyStyle.svg");
}

<svg xmlns="http://www.w3.org/2000/svg">
	<g>
		<circle cx="50" cy="50" r="40" style="fill: blue; stroke: rgb(251, 103, 150); stroke-width: 5;"/>
	</g>
</svg>

获得免费临时许可证

您可以获得免费的临时许可证 试用 Aspose.SVG for .NET，而不受评估限制。

结论

在本文中，我们学习了如何：

• 创建一个新的 SVG 图像；
• 加载现有的 SVG 图像；
• 编辑 SVG 图像；
• 设置 SVG 形状的填充和描边属性；
• 在 C# 中为形状设置样式属性。

此外，您可以在 documentation 中了解更多关于 Aspose.SVG for .NET 的信息，并探索 API 支持的不同功能。如有任何歧义，请随时在我们的 论坛 上与我们联系。

也可以看看

• 在 C# 中以编程方式更改 SVG 颜色或背景