SVGのシェイプタグの中で、pathが最も強力であり、一般的な描画問題に対処するにはパスをマスターするだけで十分です。
まずパスタグの基本的な使い方を見てみましょう。
<path d="M100,100 L200,200 L200,400" fill="#333" stroke="#000" />
パスタグは、文字列からなる情報を定義するプロパティdを通じてパスを定義し、またフィルやストローク属性によってフィルとボーダーを定義することもできます。
d属性の情報は実際には複雑ではなく、文字と数字で構成されており、数字は座標点を表し、文字はこれらの座標点をつなぐ方法を表します。 例えば、上記の例では、Mは起点を表し、Lは直線接続を表すため、dの情報は次のように解釈できます。
M100,100 -> は(100,100)座標点から始まります
L200,200 -> (100,100)から(200,200)まで直線を引く。
L200,400 -> (200,200)から(200,400)まで直線を引く。
パスタグのd属性には合計10個のコマンドがあり、以下の5つのコマンドは基本的で比較的シンプルです。
Mは(moveTo)x,yの出発座標に移動します。
Zクローズパスは経路の開始点と終点を直線的に結びます
L lineTo: 現在のノードは指定された(x,y)ノードと直線的に接続されています
Hの水平線xは現在の点のy座標を一定に保ち、x軸はxに移動して水平線を形成します
垂直線 y は現在点の座標 x を変わらず、y 軸は y 軸に移動して垂直線を形成します
MとL
MとLの別の例を見てみましょう
<path d="M30,30 L170,30 L30,170 L170,170"></path>
点A(30, 30)から直線は点B(170, 30)まで引かれ、その後まっすぐ点C(30, 170)、さらに直線で点D(170, 170)まで続き、最終的にZ字型の経路を形成します。
フィル効果、そしてZ
<パス d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="yellow"></path>
この経路記述には2つのMがあるため、1つの経路には比較的独立した2つの経路が現れます。最初の経路は上記の例と同じでZ字型です。
2番目のパスは長方形で、説明欄にZコマンドが表示されており、パスの始まりと終わりをつなぐことを示しています。
さらに、ここではパスのフィルプロパティを定義しており、パスが閉じているかどうかに関わらずフィルが効果を発揮することがわかります。
HとV
最後に、HとVという2つのコマンドを見てみましょう。これは、x軸またはy軸が変わらない場合のLコマンドの略称であり、次の2端が説明され、描かれた図は同じです。
<パス d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="yellow"></path>
<パス d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" fill="yellow"></path>
|
掲載地 2017/08/14 13:15:15
|
|
|
