今日はSVGでパスを描画する方法を勉強します・・・
パスが描けるということはつまりどんな形も描画できるんだよね、やった
どんな形でも描画できるけど、頂点など指定しなきゃいけないので結構過酷だよ～
＜path＞要素を使って図を描画するには様々なコマンドを使って座標などを指定していかなければなりません。複数種類のコマンドがあるので、少しずつ見ていくことにします。
ちなみに今回も参考図書は「 Webで使える!SVGファーストガイド 」です。
＜path＞直線を描く
＜path＞要素を使い直線を描くときはd属性の中にコマンドを使います。コマンドは以下の３種類です。
M ・・・ 始点の座標 記法→ M ｘ座標、ｙ座標
L ・・・ 直線の終点座標 記法→ L ｘ座標、ｙ座標
Z ・・・ パスを閉じる 記法→ Z
全体の基本的な記法
＜path d=”M●,■ L●,■ … L●,■ Z”/＞
●、■はｘ座標、ｙ座標が入ります。これに塗りや線の草食を加えて描画します。
<svg width="400px" height="200px" viewBox="0 0 400 200">
<path d="M20,50 L100,150 L180,50 Z"
fill="none" stroke="red" stroke-width="15"/>
</svg>＜path＞水平線、垂直線を描く
ある座標点から水平線、垂直線を描くコマンドがあります。ｘ座標、ｙ座標の片方のみを記述すればよいので少し楽です。
H ・・・ ｘ座標方向に水平線を描く 記法→ H ｘ座標
V ・・・ y座標方向に垂直線を描く 記法→ V y座標
ちなみに水平線はHorizon、垂直なという言葉はVerticalなので知っていると迷わないですね。
全体の基本的な記法
＜path d=”M●,■ H● … V■ Z”/＞
●、■はｘ座標、ｙ座標が入ります。これに塗りや線の草食を加えて描画します。
<svg width="400px" height="200px" viewBox="0 0 400 200">
<path d="M20,50 H200 V180 H20 Z"
fill="none" stroke="red" stroke-width="15"/>
</svg>もちろんLコマンドなども同時に使えます。
＜path＞円弧を描く
次は曲線ではなく、円の一部である円弧を描くコマンドです。このAコマンドは4種類の数値を指定しなければならず、かなり複雑になっています。
A ・・・ 楕円の半径、傾き、円弧の選択、移動先の座標
rx,ry （楕円の半径）・・・水平方向と垂直方向の半径
x-axis-rotation （楕円の傾き）・・・楕円の傾きを度数で指定
large-arc-flag, sweep-flag （円弧の選択）・・・短い方0 長い方1、反時計回り0 時計回り1
x,y （移動先の座標）・・ x座標、ｙ座標で指定
全体の基本的な記法
＜path d=”M●,■ A rx,ry 角度 0or1,0or1 ●,■ … Z”/＞
<svg width="400px" height="500px" viewBox="0 0 400 500">
<path d="M20,20 A300,170 0 0,1 320,190 H20 Z"
fill="none" stroke="red" stroke-width="15"/>
<path d="M20,300 A170,170 0 0,1 320,470 H20 Z"
fill="none" stroke="red" stroke-width="15"/>
</svg>楕円の半径や移動先の座標はわかりやすいですが、円弧の選択については図を見ていただいた方がわかりやすいと思います。要は切り取る円弧として短い円弧を使うのか長い円弧を使うのか、と、さらに決められない複数の円弧があるときにどっちの円弧を描画するのか0、1で指定して決めるということです。
large-arc-flag は円弧のうち長いものか短いものかを決めます。
sweep-flag は上に膨らんだ円弧か下に凹んだ円弧かを決めます。
円弧の選択 sweep-flag を0にしてみます。
<svg width="400px" height="220px" viewBox="0 0 400 220">
<path d="M20,20 A300,170 0 0,0 320,190 H20 Z"
fill="none" stroke="red" stroke-width="15"/>
</svg>きちんと下に凹んだ円弧を描くようになっています。
＜path＞二次ベジェ曲線を描く
曲線を描くとき使うのは「始点」「終点」「制御点」により決定されるベジェ曲線です。二次ベジェ曲線とは制御点を一つだけ指定する曲線です。制御点によって曲線の曲がり具合と接線の方向を指定しますが、あまり日常では使わない概念なので見慣れないものです。
二次ベジェ曲線を描画するときはQコマンドを使います。
Q ・・・ 制御点の座標 移動先の座標
x1,y1 ・・・制御点の座標
x,y ・・・移動先の座標
全体の基本的な記法
＜path d=”M●,■ Q x1,y1 x,y… “/＞
<svg width="400px" height="220px" viewBox="0 0 400 220">
<path d="M20,200 Q100,20 200,200 Q300,100 380,200"
fill="none" stroke="red" stroke-width="15"/>
</svg>この図はコマンドQを二回使っていて、制御点は大体以下の図のような位置にあります。
制御点の位置まできちんと計算して綺麗な波線を描画するのは大変です。
そんなときTコマンドを使えば次の座標点を指定するだけで勝手に綺麗な波線を引いてくれます。とても便利です。
<svg width="400px" height="300px" viewBox="0 0 400 300">
<path d="M20,200 Q100,20 200,200 T380,200"
fill="none" stroke="red" stroke-width="15"/>
</svg>上の図は前の図の２個目のQコマンドをTコマンドに変え、終点の座標だけを指定したもの。勝手に綺麗な波線を引いてくれます。
＜path＞三次ベジェ曲線を描く
制御点を一つ増やした三次ベジェ曲線もあります。コマンドはCです。
上の図のように、一つ前の点の制御点を制御点１、終点から出ている制御点を２として指定します。
C ・・・ 制御点1の座標 制御点2の座標 移動先の座標
x1,y1 ・・・制御点1の座標
x2,y2 ・・・制御点2の座標
x,y ・・・移動先の座標
全体の基本的な記法
＜path d=”M●,■ C x1,y1 x2,y2 x,y… “/＞
<svg width="400px" height="300px" viewBox="0 0 400 300">
<path d="M20,200 C100,20 130,20 300,150 C100,220 330,320 390,280"
fill="none" stroke="red" stroke-width="15"/>
</svg>どこに制御点を置けばいいのか、非常に計算がめんどくさいです。
直前の制御点2の対称点を自動で取ってくれるコマンドSもあります。コマンドSは制御点2、終点だけを記述すればよいです。
<svg width="400px" height="300px" viewBox="0 0 400 300">
<path d="M20,200 C100,20 130,20 300,150 S350,120 390,20"
fill="none" stroke="red" stroke-width="15"/>
</svg>少しなめらかになりました。しかしこれを計算しながら座標指定していくのは骨が折れます。
曲線でも直線でも複雑な図形を描く際には素直にAdobe Illustratorなど描画できるソフトを使ってSVG画像として書き出すべきですね。
コメント