SVG <path>

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

<path>タグ

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

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

  • M = 移動
  • L = ライン
  • H = 水平ライン
  • V = 垂直ライン
  • C = 曲線
  • S = スムーズ曲線
  • Q = 二次ベジェ曲線
  • T = スムーズクオadraticベジェ曲線
  • A = 椭円アーカー
  • Z = closepath

注記：全ての命令は小文字を使用できます。大文字は絶対定位を、小文字は相対定位を表します。

以下のコードをノートパソコンにコピーして、ファイルを「path1.svg」として保存してください。このファイルをウェブディレクトリに配置してください：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M250 150 L150 350 L350 350 Z" />
</svg>

上記の例では、位置250 150から始まり、位置150 350に至り、その後350 350に向かって始まり、最後に250 150でパスを閉じます。

例を見る

以下の例では、螺旋を生成しています：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M153 334"
C153 334 151 334 151 334"
C151 339 153 344 156 344"
C164 344 171 339 171 334"
C171 322 164 314 156 314"
C142 314 131 322 131 334"
C131 350 142 364 156 364"
C175 364 191 350 191 334"
C191 311 175 294 156 294"
C131 294 111 311 111 334"
C111 361 131 384 156 384"
C186 384 211 361 211 334"
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>
</svg>

例を見る

とても複雑ですね？はい！！！パスの描画の複雑さのために、複雑な図形を作成する場合は SVG エディタを使用することを強くお勧めします。