2010年5月30日日曜日

SVGの書き方(描き方)を勉強してみた。

SVGでのラインの書き方が、W3Cのサイトに載っていた。
面白い。

http://www.w3.org/TR/SVG/paths.html#PathData

基本的に大文字と小文字は、絶対位置と相対位置の違いの様子。

Mで始点に移動。
Zが終点。

Lが線を引く。(あるパスのソースを見ていて、小文字の「l」が「|(パイプ)」に見えており、「パイプって何を意味する記号だろう。。。」と悩んでいた。。小文字のエルだった。。。)

Hがhorizontal lineすなわち水平線(横線)。
Vが垂直線。vertical line

Cがちょっとややこしいが、ベジェ曲線。Mで始点を指定し、Cでコントロールポイント(イラレでおなじみ)の位置を指定、その次のx,y座標でもう一つのコントロールポイントを指定。そして最後のx,y座標で終点を指定。その四点で、曲線が描ける。
面白い。

Sはちょっと難しくて、まだよく分かりません。どうも、先のCの二つのコントロールポイントの位置関係を反映するようで、新しくコントロールポイントを一つ指定し、終点を指定してやれば、二つ目のコントロールポイントは、先にCで指定した二つのコントロールポイントの位置関係を反映してくれる様子。(くどい書き方ですね。。)

Qは、quadradでコントロールポイント一つと、始点終点で良い様子。こっちの方が分かりやすそう。
Tは、コントロールポイントが、やはり中間地点を軸に反転したものとして反映され、終点を書けばOKという、ショートハンド(省略)記述の様子。

なるほど。

解説PDFもあった。
http://tutorial.jp/graph/svg/svgman.pdf

■以下、Raphaelで地図のSVGスケールを変えるために、本家フォーラムの関連ディスカッションURIをメモ。
http://groups.google.com/group/raphaeljs/browse_thread/thread/e1a3889a37dfeac3/e42fb35ad07fe528?lnk=gst&q=map#e42fb35ad07fe528

以下は、マップ上のオブジェクトをダブルクリックして、ajaxで他のファイルを読み込み表示させるためのメモ。
http://groups.google.com/group/raphaeljs/browse_thread/thread/8406d083c5dcab65/171a2adf124e4e05?lnk=gst&q=map#171a2adf124e4e05

0 件のコメント:

コメントを投稿