SVG-パス

<path>要素は、接続された直線を描くために使用されます。

宣言

以下は、 <path> 要素の構文宣言です。主な属性のみを示しました。

<path
   d="data" >
</path>

属性

Sr.No.	Name&Description
1	d − path data,usually a set of commands like moveto, lineto etc.

<path>要素は、パスを定義するために使用されます。 Path要素は、多数のコマンドで構成されるパスデータを使用します。コマンドは、鉛筆の隙間のように動作するか、ポインタが移動してパスを描画します。

Sr.No.	Command & Description
1	M − moveto − move from one point to another point.
2	L − lineto − create a line.
3	H − horizontal lineto − create a horizontal line.
4	V − vertical lineto − create a vertical line.
5	C − curveto − create a curve.
6	S − smooth curveto − create a smooth curve.
7	Q − quadratic Bezier curve − create a quadratic Bezier curve.
8	T − smooth quadratic Bezier curveto − create a smooth quadratic Bezier curve
9	A − elliptical Arc − create a elliptical arc.
10	Z − closepath − close the path.

上記のコマンドは大文字であるため、これらは絶対パスを表します。小文字のコマンドが使用される場合、相対パスが使用されます。

例

テストVG

<html>
   <title>SVG Path</title>
   <body>

      <h1>Sample SVG Path Image</h1>

      <svg width="570" height="320">
         <g>
            <text x="0" y="10" fill="black" >Path #1: Without opacity.</text>

            <path d="M 100 100 L 300 100 L 200 300 z"
            stroke="black" stroke-width="3" fill="rgb(121,0,121)"> </path>
         </g>
      </svg>

   </body>
</html>

上記の例では、最初の形状では、M 100 100は描画ポインターを（100,100）に移動し、L 300 100は（100,100）から（300,100）に線を描画し、L 200 300は（300,100）から（200,300）に線を描画し、zパスを閉じます。

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。

不透明度のあるパス

<html>
   <title>SVG Path</title>
   <body>

      <h1>Sample SVG Path Image</h1>

      <svg width="800" height="800">
         <g>
            <text x="0" y="15" fill="black" >Path #2: With opacity </text>

            <path d="M 100 100 L 300 100 L 200 300 z"
            style="fill:rgb(121,0,121);stroke-width:3;
            stroke:rgb(0,0,0);stroke-opacity:0.5;"> </path>
         </g>
      </svg>

   </body>
</html>

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。

Svg-path

SVG-パス

宣言

属性

例

出力

不透明度のあるパス

出力

目次