csharpを使用してsvgで塗りつぶして線を引く

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

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

  1. SVG で塗りつぶしとストロークを行う C# API
  2. 【SVGフィルとは】3
  3. 【SVGストロークとは】4
  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 など、これらのサポートされている形状を表す個別のクラスを提供します。

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 ストロークのプロパティを設定できます。

  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");
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 ストロークのプロパティを設定できます。

  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");
フィル アンド ストローク パス イン 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 ストローク プロパティを適用することもできます。

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

関連項目