サーチ…
前書き
パスはSVGの最も柔軟な要素です。パスは、接続されたスプラインに配置された一連の3次または2次ベジェ曲線です。パスはループ内でオープンまたはクローズされている場合もあれば、複数のサブコンポーネントと複雑な場合もあります。パスが単純でない場合、パスの内側または外側にある領域を決定するには塗りつぶしルールが重要です。
通常、パスは自動エディタによって生成されます。通常、フォントには2次のパスが使用され、イラストには3次のパスが使用されます。
パラメーター
| 属性/パラメータ | 説明 |
|---|---|
| d | シェイプを作成する一連の描画コマンドを定義します。例えばd = "M 50,60 L 50,60"である。大文字の描画コマンドは絶対座標を指定します。小文字の描画コマンドは相対座標を指定します。 |
| （...） | 描画コマンド |
| m / M | 現在の描画位置をXY d = "M XY"に移動します。 |
| 1 / L | X、Yにラインを描くd = "L XY" |
| v / V | Y d = "V Y"に垂直な線を描きます。 |
| h / H | X d = "H X"に水平線を描きます。 |
| a / A | RxとRyの暗黙の半径とX軸回転で指定された回転を持つX、Yへの円弧を描画します。大きな弧と掃引のフラグは、これらの制約を満たす4つのアークのどれを描くべきかを選択します。 d = "A Rx Ry X軸回転（度）大円弧フラッグ（0/1）スイープフラッグ（0/1）X、Y"。 |
| q / Q | コントロールポイントX1Y1を使用してX、Yに2次ベジェ曲線を描画するd = "X1Y1 X Y" |
| t / T | 省略形の2次ベジェ曲線を描く（制御点は、現在の描画位置を通る前のq / Q描画コマンドの制御点を反映して計算される） |
| c / C | コントロールポイントX1、Y1、X2、Y2を使用してX、Yに3次ベジェ曲線を描画するd = "C X1Y1、X2Y2、XY" |
| s / S | 簡略3次ベジェ曲線を描画します（最初の制御点は、直前のc / C描画コマンドの2番目の制御点を現在の描画位置に反映させて計算されます）。 |
| - グーグー | パスの始点に線を引いてパスを閉じます（または以前に別のzが使用されている場合はパスセグメント） |
| （...） | （リストの終わり） |
| pathLength | （オプション）作成者が他の計算で較正に使用される名目上のパス長を指定することを許可します。たとえば、パスに沿ったテキストの場合 |
| ストロークパラメータ | すべてのシェイプと描画要素に共通 |
| ストローク | パスの色 |
| ストローク幅 | パスの幅 |
備考
SVG path要素に関する詳細情報は、SVGのW3C勧告に記載されています 。
Lパスコマンドを使用して斜線の青線を描く
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 L 100,50" stroke="blue" stroke-width="5" />
</svg>
結果：
H描画コマンドを使用して水平のオレンジ色の線を描く
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 H 200" stroke="orange" stroke-width="5" />
</svg>
結果：
l（相対線）パスコマンドを使用して赤い十字を描く
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 l 90,90 M 100,10 l -90,90" stroke="red" stroke-width="10" />
</svg>
結果：
Vパスコマンドを使用して垂直の緑色の線を描く
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 V 200" stroke="green" stroke-width="5" />
</svg>
結果：
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow