SVGパス
SVGパス - <パス>
<パス>要素には、パスを定義するために使用されます。
次のコマンドは、ルートデータに使用することができます。
- M =のmoveTo
- L = LINETO
- H =水平LINETO
- V =垂直LINETO
- C = curvetoといった
- S =スムーズcurvetoといった
- Q = 2次ベジエ曲線
- T =滑らかな2次ベジエcurvetoといった
- =楕円弧
- Z = closepath
注：上記のすべてのコマンドは小文字を可能にします。 資本金は絶対位置を表し、相対的な位置決めは、小文字を示しています。
例1
上記の例では、位置1500で始まるパスを定義し、位置75200に達し、そこから1500年で200〜225、最後に閉じたパス。
ここではSVGのコードは次のとおりです。
例
<SVGののxmlns = "http://www.w3.org/2000/svg"バージョン= "1.1">
<パスd = "M150 0 L75 200 L225 200 Z" />
</ SVG>
<パスd = "M150 0 L75 200 L225 200 Z" />
</ SVG>
»をお試しください
オペラユーザーの場合： ビューSVGファイル （プレビューソースSVGグラフィック上で右クリックします）。
例2
無限にスケーリングすることができるベジェ曲線滑らかな曲線モデルを使用。 通常の状況下では、ユーザは、一つまたは二つのエンドポイントと2つのコントロールポイントを選択します。 二次ベジエ曲線と呼ばれ、2つの制御点が立方体と呼ばれ、ベジェ曲線の制御点。
次の例では、2次ベジエ曲線を作成し、AとCは開始点と終了点であり、Bは、制御点です：
ここではSVGのコードは次のとおりです。
例
<SVGののxmlns = "http://www.w3.org/2000/svg"バージョン= "1.1">
<パスID = "lineAB" D = "M 100 350リットル150 -300「ストローク="赤 "
ストローク幅= "3"埋める= "なし" />
<パスID = "lineBC" D = "M 250 50リットル150 300"ストローク= "赤"
ストローク幅= "3"埋める= "なし" />
<パスd = "M 175 200リットル150 0"ストローク= "緑"ストローク幅= "3"
フィル= "なし" />
<パスd = "M 100 350 Q 150 -300 300 0"ストローク= "青"
ストローク幅= "5"埋める= "なし" />
<！ - マーク・関連ポイント - >
<Gストローク= "黒"ストローク幅= "3" "黒" =記入>
<サークルID = "pointA" CX = "100" CY = "350" R = "3" />
<サークルID = "pointB" CX = "250" CY = "50"、R = "3" />
<サークルID = "POINTC" CX = "400" CY = "350" R = "3" />
</ G>
<！ - ポイントにラベルを付けます - >
<Gフォントサイズ= "30"フォント= "サンセリフ" = "黒"ストローク= "なし"を埋めます
テキストアンカー= "真ん中">
<テキストのx = "100" Y = "350" DX = " - 30"> A </テキスト>
<テキストのx = "250" Y = "50"量dy = " - 10"> B </テキスト>
<テキストのx = "400" Y = "350" DX = "30"> C </テキスト>
</ G>
</ SVG>
<パスID = "lineAB" D = "M 100 350リットル150 -300「ストローク="赤 "
ストローク幅= "3"埋める= "なし" />
<パスID = "lineBC" D = "M 250 50リットル150 300"ストローク= "赤"
ストローク幅= "3"埋める= "なし" />
<パスd = "M 175 200リットル150 0"ストローク= "緑"ストローク幅= "3"
フィル= "なし" />
<パスd = "M 100 350 Q 150 -300 300 0"ストローク= "青"
ストローク幅= "5"埋める= "なし" />
<！ - マーク・関連ポイント - >
<Gストローク= "黒"ストローク幅= "3" "黒" =記入>
<サークルID = "pointA" CX = "100" CY = "350" R = "3" />
<サークルID = "pointB" CX = "250" CY = "50"、R = "3" />
<サークルID = "POINTC" CX = "400" CY = "350" R = "3" />
</ G>
<！ - ポイントにラベルを付けます - >
<Gフォントサイズ= "30"フォント= "サンセリフ" = "黒"ストローク= "なし"を埋めます
テキストアンカー= "真ん中">
<テキストのx = "100" Y = "350" DX = " - 30"> A </テキスト>
<テキストのx = "250" Y = "50"量dy = " - 10"> B </テキスト>
<テキストのx = "400" Y = "350" DX = "30"> C </テキスト>
</ G>
</ SVG>
»をお試しください
オペラユーザーの場合： ビューSVGファイル （プレビューソースSVGグラフィック上で右クリックします）。
複雑な？ うん！ ！ パスの複雑さを描画するときので、強く、複雑なグラフィックスを作成するために、SVGエディタを使用することをお勧めします。