このロケールの翻訳が存在しないため、英語バージョンのコンテンツを表示しています。 Help us translate this article!
« SVG Attribute reference home
この属性は以下のようにパスを定義します。
利用条件
| カテゴリ | パス定義属性 |
|---|---|
| 値 | <List of movements> |
| アニメーション可否 | Yes |
| 元となるドキュメント | SVG 1.1 (2nd Edition) |
d 属性は、実はパスの説明を複数含む文字列です。これらのパスは以下の指示子の組み合わせからなっています:
- Moveto
- Lineto
- Curveto
- Arcto
- ClosePath
これらは一つの文字列にまとめられます。大文字小文字を区別した違うコマンドがあります。大文字のコマンドはその属性を絶対位置として判断し、小文字のコマンドは現在の位置との相対的な位置を表します。コマンドとして負の値を指定することも可能です。負の値の角度は反時計回りになり、絶対座標系におけるxとyの位置は、逆の座標として扱われます。負のxの値は左に動き、負のyの値は上に動きます。
moveto
Moveto 指示子は、筆記用具を一度持ち上げ別の場所に落とす動作として考えられます。指定した点とその前の点の間には何も書かれません。すべてのパスをMovetoコマンドから始めることは良い習慣と言えます。なぜなら、初めのMovetoなしでは、コマンドがどこから始まるのかがわからないまま始まり、予期しない振る舞いをしてしまうためです。
文法 :
M x,y, x と y は絶対座標でそれぞれ横方向、縦方向を指します。m dx,dy, dx と dy は現在位置からの相対距離でそれぞれ右と下方向でに対応しています。
例 :
- 絶対位置 x=50, y= 100 へ :
<path d="M50,100..." /> - 右に 50 , 下に 100 移動 :
<path d="m50,100..." />
lineto
Moveto指示子とは違い、Lineto指示子は直線を描きます。この線は現在位置から特定の場所まで移動します。一般的なLinetoコマンドの文法は"L x,y" または "l dx, dy" です。x と y は絶対座標を表し、dx と dy 右と下への距離をそれぞれ表します。また、HとVを指定することができ、それぞれ水平方向と垂直方向の動きを指定します。L と全く同じように、小文字の時は値が相対的になります。
curveto
Curveto コマンドはベジェ曲線を指定します。ベジェ曲線には２種類あります。キュービックとクアドリックです。キュービックベジェ曲線は、クアドリックベジェ曲線の特別なケースで、終点に対する力点が同じです。クアドリックベジェ曲線の文法は "Q cx,cy x,y" または "q dcx,dcy, dx, dy" です。cx と cy は力点の絶対座標であり、dcx と dcy はそれぞれ力点の x軸, y軸方向 を表します。x と y は終点の絶対座標で、dx と dy は終点 の x軸, y軸方向の距離を表します。
キュービックベジェ曲線はクアドリックベジェ曲線と同じ概念に従いますが、２点だけ気をつけなければいけない力点があります。キュービックベジェ曲線の文法は "C c1x,c1y c2x,c2y x,y" または "c dc1x,dc1y dc2x,dc2y dx,dy" であり、c1x,c1y, と c2x,c2y はそれぞれ始点と終点の力点の絶対座標です。dc1x,dc1y, dc2x,dc2y はすべて視点に対して相対的で、終点に対してではありません。dx と dy は右と下方向での距離を表します。
ベジェ曲線を滑らかにつなげるために、TとSコマンドを使うことができます。これらの記法は他のCurvetoコマンドよりもシンプルです。なぜなら、始点は前の力点からの点を反映しているもの、または実際に前に力点がない場合はそのものであると仮定されるからです。Tの文法は "T x,y" または "t dx,dy" でそれぞれ絶対と相対方向を表し、クアドリックベジェ曲線を作るために使われます。S はキューブベジェ曲線を作るために使われ、文法は "S cx,cy x,y" または "s dcx,dcy dx,dy", であり (d)cx は次の力点を表します。
最終的に、すべてのベジェ曲線のコマンドは、初めのコマンド入力後にすべてのパラメータを複数回指定することで「ポリベジェ」にすることができます。結果として、以下の二つのコマンドは全く同じパスを描画します。
<path d="c 50,0 50,100 100,100 50,0 50,-100 100,-100" />
<path d="c 50,0 50,100 100,100 c 50,0 50,-100 100,-100" />
arcto
ときどき、?楕円曲線を使って表現したほうが、ベジェ曲線よりも簡単になることがあります。このため、Arctoコマンドがパスに用意されています。円弧の中心は別の変数から計算されます。Arctoの宣言は比較的複雑です: "A rx, ry xAxisRotate LargeArcFlag,SweepFlag x,y". 解読していくと、rx と ry は xとy方向の角丸の大きさであり、 LargeArcFlag は 0か1の値を取り、最小(0)と最大(1)の?円弧のどちらかが描かれるかを決めます。SweepFlag は0か1であり、円弧が時計回りか(1)それとも反時計回り(0)で描画されるべきかを決めます。 x と y は目標となる座標です。xAxisRotateは現在の参照フレームから相対的にx軸を変更しそうですが、Gecko7では効果がなさそうです。
closepath
ClosePathコマンドは現在の位置から、始点へと単に直線を描くコマンドです。これはもっともシンプルなコマンドであり、パラメータを取りません。これは始点への最短の直線をとり、そこに別のパスがあったら横断していきます。"Z" または "z" という記法ががあり,両方とも全く同じ挙動をします。
Elements
以下の要素でd属性を使うことができます。
加えて、同じルールが <animate> アニメーションパスに適応可能です。
メモ
原点(座標 0,0)は通常コンテキストにおける左上の角に当たります。しかしながら、<glyph> 要素は文字エリアに置いて左下の角 が原点となります。