C# を使用した SVG の塗りつぶしと線

SVG (Scalable Vector Graphics) は、XML ベースの Web フレンドリーなベクターファイル形式です。ウェブページに視覚情報を表示するために使用されます。 SVG 画像は、画像の品質を変えることなくスケーラブルです。この記事では、C# を使用して SVG で塗りつぶしと線を操作する方法を学習します。

この記事では、次のトピックについて説明します。

SVG で塗りつぶしとストロークを行う C# API
【SVGフィルとは】3
【SVGストロークとは】4
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をダウンロード】【15】するか【NuGet】【16】でインストールしてください。

PM> Install-Package Aspose.SVG

SVG 塗りつぶしとは

fill プロパティは、アウトライン内の形状の色を設定するために使用される基本的な SVG プレゼンテーション属性の 1 つです。

次の塗りつぶし属性を定義できます。

fill: 塗りつぶす色を設定します。塗りつぶしがない場合は none または transparent を指定します。
fill-opacity: 不透明度の値を 0 から 1 の間で設定します。
fill-rule: 非ゼロ、evenodd など、形状の内側領域を決定する方法を定義します。

SVG ストロークとは

stroke プロパティは、SVG 形状の輪郭または境界を定義します。ストロークプレゼンテーション属性は、シェイプのアウトラインの色を設定します。

次のストローク属性を設定できます。

ストローク: 色の値を設定します。
stroke-dasharray: 破線の種類を指定します。
ストロークダッシュオフセット
stroke-linecap: お尻、四角、丸などの線の端の形状を制御します。
stroke-linejoin: マイター、ベベル、ラウンドなど、2 つの線の結合方法を指定します。
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 ストロークのプロパティを設定できます。

まず、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要素のすべての円要素を見つける
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");

Fill-and-Stroke-Circle-in-CSharp — C# で円要素の塗りと線を設定します。

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");

フィルアンドストロークパスイン CSharp — C# でパス要素の塗りと線を設定します。

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");
}

Apply-Fill-and-Stroke-using-Style-in-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 でサポートされているさまざまな機能を調べることができます。ご不明な点がございましたら、フォーラムまでお気軽にお問い合わせください。

SVG で塗りつぶしとストロークを行う C# API#

SVG 塗りつぶしとは#

SVG ストロークとは#

SVG の塗りと線#

C# で円を塗りつぶして線を引く#

C# でパスを塗りつぶし、線を引く#

C# でスタイルを使用して塗りと線を適用する#

無料の一時ライセンスを取得する#

結論#

関連項目#