SVG <path>

SVG パス - <path>

<path> 要素はパスを定義するために使用されます。

以下のコマンドはパスデータに使用できます：

  • M = moveto（移動する）
  • L = lineto（線を引く）
  • H = horizontal lineto（水平線に）
  • V = vertical lineto（垂直線に）
  • C = curveto（曲線に）
  • S = smooth curveto（滑らかな曲線に）
  • Q = quadratic Bézier curve（二次ベジェ曲線）
  • T = smooth quadratic Bézier curveto（滑らかな二次ベジェ曲線）
  • A = elliptical Arc（円弧）
  • Z = closepath（パスを閉じる）

注意：上記のすべてのコマンドは小文字でも表示できます。大文字は絶対位置を、小文字は相対位置を示します。

例1

以下の例では、150,0の位置から始まり、75,200の位置に線を引き、その後225,200の位置に線を引き、最後に150,0に闭合するパスを定義しています。

これは SVG コードです：

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

自分で試してみてください

例2

ベジェ曲線（Bézier curves）は、無限に拡大可能な滑らかな曲線のモデルリングに使用されます。通常、ユーザーは2つの端点と1または2つの制御点を選択します。1つの制御点を持つベジェ曲線は二次ベジェ曲線（quadratic Bézier curve）と呼ばれ、2つの制御点を持つベジェ曲線は三次ベジェ曲線（cubic）と呼ばれます。

次のように二次ベジェ曲線を描画します。AとCは始点と終点、Bは制御点です：

A B C

これは SVG コードです：

<svg height="400" width="450">
  <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
  <!-- 标记相关的点 -->
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="250" cy="50" r="3" />
    <circle id="pointC" cx="400" cy="350" r="3" />
  </g>
  <!-- 给点添加标签 -->
  <g font-size="30" font-family="sans-serif" fill="black" stroke="none"
  text-anchor="middle">
    <text x="100" y="350" dx="-30">A</text>
    <text x="250" y="50" dy="-10">B</text>
    <text x="400" y="350" dx="30">C</text>
  </g>
</svg>

自分で試してみてください

とても複雑ですか？はい！！！パスの描画が非常に複雑であるため、複雑なグラフィックを作成する場合はSVGエディタの使用を強くお勧めします。