SVGファイルでSVGパスのコマンドと座標

Question

を教えてください、私はこのようになりますパスが見つかりました：

<path id="kvg:0548b-s7" kvg:type="㇐b" d="M65.32,48.38c5.65-0.95,12.61-2.46,18.92-3.42c2.05-0.45,4.13-0.5,6.23-0.13"/> 

誰かが座標48.38c5.65-0.95と18.92-3.42c2.05-0.45が何を表しているか説明できますか？

Answer 1

私は混乱のいくつかは、フォーマットが個々のパラメータをさまざまなパスオペランドに分けることができるというトリックから来ていると思います。例中のSO：

M65.32,48.38c5.65-0.95,12.61-2.46,18.92-3.42c2.05-0.45,4.13-0.5,6.23-0.13

あなたが見ますで区切らCのようなパラメータハイフン（マイナス記号）で区切られたM（OVE）65.32,48.38 ...

のようにコンマで区切られ

• （UBICベジェ）2.05から0.45 ...
• 新しいオペランド... 48.38c5.65 ...
• あなたはまた、代わりにコンマの空白で区切られたパラメータが表示されます
• あなたかもしれないとしても、先行するパラメータは、時にはあなたが科学的表記のパラメータが表示されます、それ
• 期間を持っていた場合には先頭のピリオドで区切られたパラメータを参照してください3.22e-9で、ゼロを排除する

オペランドの種類ごとに正確に特定の数のパラメータ（M、L、Tが必要です。 H、Vは1を必要とする。 Q、Sが必要4; Cは6を必要とする。 Aニーズ7; Zは0が必要です）、オペランドが省略されている状況が表示されます。後ろに4つのパラメータがあるLがある場合は、実際には2つの線を意味し、3つの立方体ベジェを意味した後は18のパラメータを持つCを意味します。

これは、SVGの無駄なスペースを最小限に抑え、読みにくくすることだけではありません。

Answer 2

SVGの<path>タグのd属性には、SVGの全体的な形状を作成するために処理される一連の説明または説明が含まれています。これらの命令は、異なるタイプのものとすることができる。

1. のmoveTo ::どこか別のパス（Mまたはm構文）を再起動
2. LINETO ::直線（Lまたはl構文、またはHを描きますそしてV、またはhとv）
3. curvetoといった ::立方ベジェ曲線を描く（Cかc構文）
4. Arcto :: ClosePath楕円曲線（A又はa構文）
5. を描く::パス（Z又はz構文の開口点に直線を描く）

大文字の構文は、絶対位置の値が指定されていることを意味します。小文字の構文は、相対位置の値が続くことを意味します。つまり、後続の座標が現在の制御点から右下に見つかることを意味します。

SVGのd属性で提供される指示は、コマンドの絶対位置の値を示す大文字のMで始まります。しかし、Curveto命令セットの相対値を示す小文字のcコマンドも存在します。最初について

はあなたがについて尋ねている座標...

Movetoコマンドは2つの引数を持っています。あなたが問い合わせる最初の値の最初の部分で48.38は、Movetoコマンドのy軸パラメータ（xパラメータ65.32に続く）です。残りのc5.65-0.95は、新しいCurveto命令セットの始まりです。

Curvetoコマンドには、それぞれがダッシュ（-）で区切られたxとyのペアで構成される3つの引数があります。小文字のcで示されているように、以下の値は相対的な値です。最初のペアはカーブを開始するコントロールポイント、2番目はカーブを終了するコントロールポイント、3番目はカーブが始まる現在のポイントを定義する座標です。

あなたが尋ねている座標の2番目のセットについては...

18.92から3.42最初Curvetoコマンドによって定義された現在のポイント（第3引数）であり、そしてc2.05-0.45は、ベジェ曲線の開始を制御する次Curvetoコマンドの第1引数であります。

これらの値のドットは小数点です。

d属性を使用し、ドキュメントで定義されている引数の数に応じてコマンドごとに分割すると、命令セットはmuch more readableになります。

d属性の詳細については、see hereおよびhereを参照してください。

ベジェ曲線の詳細については、see hereを参照してください。