SVGのストロークプロパティについての基本ガイド

2024-02-17 08:04 SVG ストローク プロパティ

  1. ストロークカラーの設定: SVGのストロークカラーは、要素の輪郭線の色を指定します。以下のコード例は、ストロークカラーを指定する方法を示しています。

    <svg>
 <rect x="50" y="50" width="200" height="100" stroke="red" />
</svg>

  2. ストローク幅の設定: ストローク幅は、要素の輪郭線の太さを指定します。以下のコード例は、ストローク幅を指定する方法を示しています。

    <svg>
 <rect x="50" y="50" width="200" height="100" stroke="black" stroke-width="2" />
</svg>

  3. ストロークスタイルの設定: ストロークスタイルは、要素の輪郭線のスタイルを指定します。以下のコード例は、ストロークスタイルを指定する方法を示しています。

    <svg>
 <rect x="50" y="50" width="200" height="100" stroke="blue" stroke-width="2" stroke-dasharray="5,2" />
</svg>

    この例では、stroke-dasharrayプロパティを使用して、点線のようなストロークスタイルを作成しています。

上記のコード例は、基本的なストロークプロパティの使用方法を示していますが、SVGではさまざまなプロパティが利用可能です。必要に応じて、stroke-linecap（線の終端スタイル）、stroke-linejoin（線の角度スタイル）、stroke-opacity（線の透明度）などの追加のプロパティを使用することもできます。

この記事では、ストロークプロパティの基本的な使用法を解説しました。これらのプロパティを組み合わせて使用することで、さまざまな外観の線や図形を作成することができます。詳細な情報については、SVGの公式ドキュメントやチュートリアルを参照してください。