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

SVG（可縮放矢量圖形）是一種基於 XML 的網絡友好矢量文件格式。它用於在網頁上顯示視覺信息。 SVG 圖像可以縮放而不改變圖像的質量。在本文中，我們將學習如何使用 C# 在 SVG 中處理填充和描邊。

本文應涵蓋以下主題：

在 SVG 中填充和描邊的 C# API
什麼是 SVG 填充
什麼是 SVG 描邊
SVG 中的描邊和填充
SVG 中的填充和描邊圓
SVG 中的填充和描邊路徑
使用樣式應用填充和描邊

用於在 SVG 中填充和描邊的 C# API

要在 C# 中使用 SVG 的填充和描邊屬性，我們將使用 Aspose.SVG for .NET API。它允許加載、解析、渲染、創建 SVG 文件並將其轉換為流行格式，而無需任何軟件依賴性。

API 的 SVGDocument 類表示 SVG 層次結構的根並包含全部內容。此類的 Save() 方法允許將 SVG 保存到指定的文件路徑。 QuerySelector() 方法返回文檔中與選擇器匹配的第一個元素。 API 支持使用流行的形狀，例如矩形、圓形、橢圓形、直線、折線等。API 提供單獨的類來表示這些支持的形狀，例如 SVGCircleElement 表示圓形，SVGPolygonElement 表示多邊形等。

請下載 API 的 DLL 或使用 NuGet 安裝它。

PM> Install-Package Aspose.SVG

什麼是 SVG 填充？

fill 屬性是基本的 SVG 表示屬性之一，用於設置輪廓內形狀的顏色。

我們可以定義以下填充屬性：

fill：設置要填充的顏色。如果沒有填充，請指定無或透明。
fill-opacity：設置 0 到 1 之間的不透明度值。
fill-rule：定義形狀的內部區域如何確定，例如非零、evenodd。

什麼是 SVG 描邊？

stroke 屬性定義 SVG 形狀的輪廓或邊框。 stroke presentation 屬性設置形狀輪廓的顏色。

我們可以設置以下筆劃屬性：

描邊：設置顏色值。
stroke-dasharray：指定虛線類型。
筆劃偏移量
stroke-linecap：控制線條末端的形狀，如平頭、方頭、圓頭。
stroke-linejoin：指定兩條線如何連接，例如斜接、斜角和圓形。
stroke-miterlimit：如果使用，必須大於或等於 1。
stroke-opacity：設置 0 到 1 之間的不透明度值。
stroke-width：設置寬度。

SVG 中的填充和描邊

填充和描邊都用於向 SVG 中的圖形添加顏色、漸變或圖案。填充繪製 SVG 元素的內部，而描邊繪製其輪廓。我們可以在 style 屬性中同時指定 fill 和 stroke，或者將它們用作 presentation 屬性。

我們可以在樣式屬性中設置 SVG 填充和 SVG 描邊，如下所示：

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

我們還可以在展示屬性中使用相同的樣式屬性，如下所示：

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

為了指定 SVG 顏色，我們可以使用紅色、藍色等顏色名稱。我們也可以使用 RGB 值或 HEX 值來表示顏色。

C# 中的填充和描邊圓

我們可以按照以下步驟為圓設置 SVG 填充和 SVG 描邊屬性：

首先，使用 SVGDocument 類加載現有的 SVG。
接下來，獲取文檔的根元素。
然後，使用 QuerySelectorAll() 方法查找所有圓形元素。
之後，為選定的 SVGCircleElement 設置填充屬性。
或者，為選定的 SVGCircleElement 設置筆觸屬性。
最後，使用 Save() 方法保存輸出的 SVG 圖像。

下面的代碼示例展示瞭如何在 C# 中為 SVG 的圓形元素設置填充和描邊。

// 此代碼示例演示如何在 C# 中為 SVG 的圓形元素設置填充和描邊屬性。
// 加載現有的 SVG 圖像
var document = new SVGDocument(@"C:\Files\SVG\Circle.svg");

// 獲取文檔的根 SVG 元素
var svgElement = document.RootElement;

// 查找g元素中的所有circle元素
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 描邊屬性：

首先，使用 SVGDocument 類加載現有的 SVG。
接下來，獲取文檔的根元素。
然後，使用 QuerySelector() 方法獲取路徑元素。
之後，為選定的 SVGPathElement 設置填充屬性。
或者，為選定的 SVGPathElement 設置筆劃屬性。
最後，使用 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 描邊屬性：

首先，創建 SVGDocument 類的一個實例。
接下來，獲取文檔的根元素。
然後，使用 CreateElementNS() 方法創建一個圓形元素。
接下來，設置圓的基本屬性，例如 Cx、Cy 和 R。
然後，使用 SetAttribute() 方法應用樣式屬性。
之後，使用 AppendChild() 方法追加孩子。
最後，使用 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");
}

使用 CSharp 中的樣式應用填充和描邊 — 使用 CSS 樣式應用填充和描邊

<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# 中設置形狀的樣式屬性。

此外，您可以在文檔中了解有關 Aspose.SVG for .NET 的更多信息，並探索 API 支持的不同功能。如有任何歧義，請隨時在我們的論壇上與我們聯繫。

也可以看看

在 C# 中以編程方式更改 SVG 顏色或背景

用於在 SVG 中填充和描邊的 C# API#

什麼是 SVG 填充？#

什麼是 SVG 描邊？#

SVG 中的填充和描邊#

C# 中的填充和描邊圓#

C# 中的填充和描邊路徑#

在 C# 中使用樣式應用填充和描邊#

獲得免費的臨時許可證#

結論#

也可以看看#