この性質は経路を定義します。
使い
カテゴリパス定義属性
価値
変動性:はい
仕様書 SVG 1.1(第2版)
性質 d は実際には一連の経路記述を含む文字列です。 これらの経路は以下の指示で構成されています。
これらは一つの列で組み合わされています。 これらの異なるコマンドは大文字を区別します。 大文字のコマンドはパラメータが絶対位置であることを示し、小文字のコマンドは現在の位置に対する点を示します。 負の値をコマンドのパラメータとして指定できます。負の角度は反時計回りで、絶対的なxとyの位置は負の座標とみなされます。 負の相対x値は左に動き、負の相対y値は上に移動します。
移動
Movetoコマンドは、描画ペンを手に取って別の場所に着地するようなものと考えられます。 前の点とこの指定された点の間に線分は描かれていません。 Movetoコマンドでパスを始めるのは良いアイデアです。なぜなら、初期化されたMovetoがなければ、出発点が前の操作が行われた場所になってしまい、不確定な挙動につながる可能性があるからです。
構文:
ここで m x, y は絶対座標であり、それぞれ水平座標と垂直座標を表します。
ここでのm、dx、dyはそれぞれ現在の点に対する距離、右と下の距離です。
例：
絶対位置x=50では、y=100:<path d="M50,100..." />
右に50分、下に100分進む:<パスd="m50,100..." />
リネト
Movetoコマンドとは異なり、Linetoコマンドは直線的なセグメントを描画します。 この直線線分は現在の位置から指定された位置へ移動します。 ネイティブのLinetoコマンドの構文は「L x, y」または「l dx, dy」で、xとyは絶対座標、dxとdyはそれぞれ右と下の距離を表します。 また、HとVという文字もあり、それぞれ水平方向と垂直方向の動きを示します。 これらはLと同じ構文を持ち、小文字のバージョンは相対距離、大文字のバージョンは絶対位置です。
カーブト
Curvtoコマンドはベジエ曲線を指定します。 ベジエ曲線には三次曲線と二次曲線の2種類があります。 二次ベジエ曲線とは、制御点の両端が同じである特別な立方ベジエ曲線です。 二次ベジエ曲線の構文は「Q cx, cy x, y」または「q dcx, dcy dx, dy」です。 CxとCyはどちらも制御点の絶対座標であり、DCXとDCYはそれぞれX方向とY方向の制御点間の距離です。
三次ベジエ曲線は二次ベジエ曲線と同じ概念に従いますが、2つの制御点を考慮する必要があります。 三次ベジェ曲線の構文は次の通りです:「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は第二の制御点を指定します。
最後に、すべてのベジエ曲線コマンドは多辺ベジェグラフを作成し、まずコマンドを初期化し、その後すべてのパラメータを複数回指定して多面ベジエグラフを作成できます。 したがって、以下の2つのコマンドがまったく同じパスを作成できます。
アルクト
時には、ベジエ曲線経路よりも楕円弧曲線経路の方が記述が簡単になることもあります。 結局のところ、パス要素はArctoコマンドをサポートしています。 弧の中心は他の変数によって計算されます。 arcto宣言はVisual Studioの繰り返しのようなものです:「A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y」。 分解すると、rxとryはそれぞれx方向とy方向の半径であり、LargeArcFlagの値は0か1かで、小さな弧(0)を描くか大きな弧(1)を描くかを判断します。 スイープフラッグは0か1のどちらかで、これは弧が時計回り(1)か反時計回り(0)かを判別するために使われます。 xとyは目的地の座標です。 xAxisRotateはx軸の向きを現在の参照フレームに対して変更することをサポートしていますが、このパラメータはGecko 7ではあまり影響を与えていないようです。
クローズパス
ClosePathコマンドは、現在の点から経路の最初の点まで直線を描くだけです。 これは最も単純なコマンドで、特にパラメータはありません。 最短線形経路をたどって出発点に至り、他の経路がその経路に重なれば、可能な経路同士が交わる。 構文は「Z」または「z」で、両方の書き込み方法は同じ機能を持ちます。
要素
以下の要素でd属性を使用できます:
同じルールは<animate>アニメーションパスにも適用可能です。
注意
原点(座標系0,0点)はしばしばコンテキストの左上隅にあります。 しかし<glyph>、その要素の原点は郵便受けの左下隅にあります。
コンマは任意の2つの数字の間に許可されますが、それ以外の数字では禁止されています。
例
<SVG version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<path fill="#F7931E" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/>
</svg>
d="M37,17v15H14V17H37z M50,0H0v50h50V0z"が実際に何を意味するのかを示すために、この文字列の各サブパラグラフについて議論してみましょう。
d=" M37,17 || V15 || H14 || V17 || H37 ||z // M50,0 || H0 || V50 || H50 || V0 || z"
d=
このプロパティはSVG全体を構成する文字列を含みます。
M37,17
MはMoveToの略称です。 大文字の「M」は絶対座標、小文字の「m」は相関距離を示します。 これは、開始座標に基づいており、線が箱の内側にあり、箱の中の長方形の右上隅から始まることを意味します。
37は開始時のSVG位置の略称で、X軸の37ピクセルに位置します。
17 svgの位置を開始、y軸の17ピクセルから。
V15
Vは垂直(vertical)を意味します。 大文字のVは絶対座標を示し、小文字のVは相対的な長さと距離を示します。 dx/dyとx/yは、対応するH/Vおよびh/vの位置に使うことができます。
ここでは、与えられた座標に対して15ピクセルの垂直線を描く形で表現します。 つまり、座標37、32まで15ピクセルを描くということです。
H14
Hはレベルを意味し、絶対座標で大文字で表しています。
v15の終わりから、絶対座標14に達するまで水平線を描き、x座標14に達したら線描きを終了します。 ストロークは座標14.32に位置しています。
V17
前述と同様に、前の線の端から垂直線を引いてy軸座標17まで描いていきます。 ストロークは座標14、17に位置しています。
H37
最後に14、17から横線を引いてx軸座標37まで進みます。 この線は座標37.17(Mの値)に位置します。
z
小文字と大文字のZは、一連のSVGセグメントを閉じます。
,
次の単純なベクトルグラフィックセグメントの列はカンマで始まります。 次の単純なベクトル線分の列が外側の箱を作ります。
M50,0
x軸50、y軸0から始めます。
H0
直線を(0,0)まで引きます。
V50
50ピクセルに対して0,0ピクセルの縦線を描きます。 この線は(0,50)に描かれます。
H50
(0,-50)に対して50ピクセルの水平線を描きます。 この線は右に引かれ、(50,50)に描かれます。
V0
縦線を描き続けてy軸座標0に到達します。 これにより線が(50,0)に引かれ、これはMの値となります。
z
小文字と大文字のZは、一連のSVGセグメントを閉じます。
コードを添付してください:
最後に、文書へのリンクを添付します:https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
|
掲載地 2018/05/04 11:29:47
|
|
|
|
