Svg-path
提供：Dev Guides
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画像レンダリングをサポートしています。
