グラフィックスの利用(2)

1. 長方形の描き方

※長方形のことを英語でrectangleという（略してrect）．長方形はrectで描く．
<svg width=".." height=".." viewBox="x y w h" xmlns="http://www.w3.org/2000/svg"></svg>において，長方形の書き方の基本は次の通りです．

(A) 座標と縦横の他もrectの要素として書き並べる方法
<rect x=".." y=".." width=".." height=".." stroke="color1" stroke-width=".." fill="color2" />
(B)　座標と縦横の他はstyle属性として書き並べる方法
<rect x=".." y=".." width=".." height=".." style="stroke:color1; stroke-width:..; fill:color2;" />

以下は，<svg width="100" height="200" viewBox="0 0 10 20" ...での例とする．
(A)(B)とも(x,y)はビューポートでの左上のｘ座標とｙ座標，widthは横幅，heightは縦幅を指定します．
strokeは輪郭線の色，stroke-widthは輪郭線の幅，fillは塗りつぶしの有無を表します．

1)は<rect x="2" y="1" width="5" height="3" stroke="black" stroke-width="1" fill="#009900" />の場合です．
左上端が(2,1)，右下端が(2+5,1+3)の緑の長方形に対して，輪郭線の幅が1となってるので，長方形の内側の緑色の部分は(2.5, 1.5)から(6.5, 3.5)まで，黒の輪郭線の外側は(1.5, 0.5)から(7.5, 4.5)までです．

2)は<rect x="2" y="1" width="5" height="3" stroke="black" stroke-width="0.1" fill="none" />の場合です．

3)は<rect x="2" y="1" width="5" height="3" fill="blue" />の場合です．fillで指定された色で内部が正確にwidth, heightにそろいます．

　この他，輪郭線には実線，鎖線，1点鎖線などの属性をstroke-dasharrayで指定できます．またstroke，fillとも不透明度の属性をopacityで指定できます．opacityは「不透明度」すなわち透明度の逆でopacity:1;が塗りつぶしのまま，opacity:0;が透明で，この間の小数値を自由に指定できます．

(A)の書き方では次の例のように書き足す．
stroke-dasharray="0.2 0.2" stroke-opacity="0.5" fill-opacity="0.3"
(B)の書き方では次の例のように書き足す．
styleの中にstroke-dasharray:0.2 0.2; stroke-opacity:0.5; fill-opacity:0.3;

4)は<rect x="2" y="1" width="5" height="3" style="stroke:red;stroke-opacity:0.7; stroke-width:0.5; stroke-dasharray:0.7 0.2; fill:#ffff00;fill-opacity:0.3;" />の場合です．

2. 楕円の描き方

※楕円のことを英語でellipse（エリプス…「リ」にアクセントがある）という．楕円はellipseで描く．
<svg width=".." height=".." viewBox="x y w h" xmlns="http://www.w3.org/2000/svg"></svg>において，楕円の書き方の基本は次の通りです．

(A) 中心の座標(cx, cy)，横半径rx，縦半径ryの他もellipseの要素として書き並べる方法
<ellipse cx=".." cy=".." rx=".." ry=".." stroke="color1" stroke-width=".." fill="color2" />
(B)　中心の座標(cx, cy)，横半径rx，縦半径ryの他はstyle属性として書き並べる方法
<ellipse cx=".." cy=".." rx=".." ry=".." style="stroke:color1; stroke-width:..; fill:color2;" />

1)は<ellipse cx="5" cy="2.5" rx="4" ry="2" style="stroke:red; stroke-width:0.2; fill:silver" />の場合です．
楕円の中心は(5, 2.5)横の半径は4,縦の半径は2なので横長の楕円です.
輪郭線は赤，輪郭線の太さはビューポートのスケールで0.2，楕円の内部は銀色で塗りつぶされます．

2)は<ellipse cx="5" cy="5" rx="3" ry="4" style="stroke:#000000; stroke-width:0.3; fill:none" />の場合です．
楕円の中心は(5, 5)横の半径は3,縦の半径は4なので縦長の楕円です.
輪郭線は黒，輪郭線の太さはビューポートのスケールで0.3，楕円の内部は塗りつぶされず透明です．

3)は
<ellipse cx="5" cy="4" rx="4" ry="2.5" style="stroke:blue;stroke-dasharray:0.4 0.2;stroke-opacity:0.7;stroke-width:0.3; fill:#00ffff;fill-opacity:0.3;" />
<ellipse cx="5" cy="7" rx="4" ry="2.5" style="stroke:red;stroke-dasharray:0.4 0.2;stroke-opacity:0.7;stroke-width:0.3; fill:#ff0000;fill-opacity:0.2;" /> の場合です．
後から描いた赤の楕円の不透明度を低くしているので，青の楕円が透けて見えます．

3. 折れ線の描き方

　lineで描ける直線を次々につないでいけば折れ線を描けますが，次に述べるpolylineを使うともっと簡単に描くことができます． <svg width=".." height=".." viewBox="x y w h" xmlns="http://www.w3.org/2000/svg"></svg>において，楕円の書き方の基本は次の通りです．
　なお，stroke, stroke-width, fillなどを，(A)折れ線の要素として並べる，(B)styleの属性として並べる，の書き方は前の２つの例と同様にどちらも可能です．

◎(C1) 点の座標を x1,y1 x2,y2,..と書き並べる方法
<polyline points="x1,y1 x2,y2 ..." />
◎(C2)　点の座標を x1 y1, x2 y2,..と書き並べる方法
<polyline points="x1 y1, x2 y2, ..." />
〇(C3)　点の座標を x1 y1 x2 y2,..と書き並べる方法
<polyline points="x1 y1 x2 y2 ..." />
〇(C4)　点の座標を x1,y1,x2,y2,..と書き並べる方法
<polyline points="x1,y1,x2,y2,..." />

　半角スペースも半角カンマも区切り文字として同じように扱われるので，(C1)から(C4)はどれも同じ結果になります．
　ただし，「数字が奇数個になってしまった場合」「最後がカンマで終わっている場合」はエラーになりますから，ｘ座標とｙ座標の対が見やすく，間違いにくい書き方が有利です．その点から言えば(C1)または(C2)のように書くのがよいでしょう．
　なお，fill="none"もしくはstyle="fill:none;"の記述を忘れると，始点と終点を結んだ多角形として中が塗りつぶされますので，折れ線にするには「必ずfillをnoneにする」と決める方がよい．

1)は<polyline points="2,3 3,1 4,4 5,1 6,3" style="stroke:black;stroke-width:0.2;fill:none;" />と書いたものです．

2)は<polyline points="2 2,4 2, 4 4, 2 4, 2 6, 4 6" style="stroke:green;stroke-dasharray:0.4 0.4;stroke-width:0.3;fill:none;" />と書いたものです．

3)は<polyline points="1,6 2,2 3,1 4,1 5,3 2,6" style="stroke:blue;stroke-width:0.1;" />のようにfillをnoneにするのを忘れたために，始点と終点を結ぶ線が閉じられて黒で塗りつぶされた失敗例です．

4)はExcelデータを流し込んで点の座標を埋めたもので，21分割の折れ線でも滑らかな正弦曲線を表現できていることが分かります（上下は逆です）．
<polyline points="0.000,0.000 0.314,0.309 0.628,0.588 0.942,0.809 1.257,0.951 1.571,1.000 1.885,0.951 2.199,0.809 2.513,0.588 2.827,0.309 3.142,0.000 3.456,-0.309 3.770,-0.588 4.084,-0.809 4.398,-0.951 4.712,-1.000 5.027,-0.951 5.341,-0.809 5.655,-0.588 5.969,-0.309 6.283,0.000" style="stroke:blue;stroke-width:0.05;fill:none;" />

4. 多角形の描き方

　四角形tetragon，五角形pentagon，六角形hexagon，…のように接尾語のgonを付けると，「..角形」になります．これらの総称が多角形polygonです．
　<svg width=".." height=".." viewBox="x y w h" xmlns="http://www.w3.org/2000/svg"></svg>において，多角形の書き方の基本は次の通りです．
　なお，stroke, stroke-width, fillなどを，(A)折れ線の要素として並べる，(B)styleの属性として並べるの書き方，および，カンマで区切ってもスペースで区切っても同じという事情は前の例と同様です．

1)は<polygon points="5,1 1,4 3,8 7,8 9,4" style="stroke:red;stroke-width:0.1;fill:yellow;" />と書いた場合です．最後の点(9,4)から最初の点(5,1)へは自動的に線が引かれて閉じます．

2)は<polygon points="2,4.5 2,5.5 8,5.5 7.5,4 7,4.5" style="stroke:black;stroke-width:0.1;fill:none;" />により，明朝体風に漢字の「一」を試作して，中抜き文字で表示したものです．

　凸多角形では，「どこが内部であるか」ということははっきりしていますが，多角形の辺が交差している凹多角形では，内部と外部の区別は一見して明らかとは言えません．この場合に，fill-rule:nonzero;という属性を指定すると，左図のように市松模様（チェック模様）になります．
3)は<polygon points="2,2 2,8 8,2 8,8" style="stroke:blue;stroke-width:0.1;fill:aqua;fill-rule:nonzero;" />としたもので，fill-rule:nonzero;は各点から半直線を伸ばして無限の彼方に向かったとき，1回でも多角形と交わる点は内部としてfillのcolorで塗るというルールです．fill-ruleの記述が省略された場合もnonzeroになります．

5. 角なし長方形（丸い長方形，角丸四角形）の描き方

　長方形rectの要素にrx,ryを付け加えると，角が丸い長方形が描けます．このrx,ryは楕円のときに使った横方向の半径，縦方向の半径です．

1)は<rect x="2" y="1" width="7" height="8" rx="1" ry="1" style="stroke:green;stroke-width:0.1;fill:#ccaa66;" />としたもので，長方形の角を縦横とも半径1の楕円（円）で削り取って丸くしたものです．

6. <path>による多角形や弧の描き方

　<path>を使うと，直線，長方形，円などの基本図形に限られず，もっと一般的な線が描けます．
次の例では，<svg width="100" height="100" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">により，描画領域100×100に(0,0)～(10,10)のビューポートを投影しています．ビューポート座標を見やすくするために縦横の方眼線を書き込んでいるが，これは解説の中身には関係しません．

(1)は
<path d="M 5,1 L 1,3 L 1,7 L 5,9 L 9,7 L 9, 3" style="stroke:red;stroke-width:0.2;" />と書いたもので，<pathで始まり，/>で終わる．
　d=".."はdataという意味だと言われている．
　コマンドのMはmovetoの略で，続く２つの数字（カンマ区切りでもスペース区切りでもよい）が新しいパスの始点を示す．現在地がどこであっても，その点までは，ペンを上げて移動するだけになる．
Lはlinetoの略と考えればよく，続く２つの数字まで線が引かれる.
　なお，(1)のように書くと，polygonで書いた時と同様に，規定値のblackで塗りつぶされます．

(2)は
<path d="M 5,1 L 1,3 L 1,7 L 5,9 L 9,7 L 9, 3" style="stroke:red;stroke-width:0.2;fill:none;" />と書いたもので，塗りつぶしはありません．
(1)(2)において大文字のM, Lの後の座標はビューポート座標を直接指定したもの（絶対座標）と解釈されます．これに対して小文字のm, lで書いたとき，後の座標は相対的な移動量と解釈されます．次の例(3)は(2)と同じ内容を相対座標で書いたものです．

(3)は
<path d="M 5,1 l -4,2 l0,4 l 4,2 l 4,-2 l 0,-4" style="stroke:red;stroke-width:0.2;fill:none;" />としたもので，先頭のMだけは大文字でも小文字でも絶対座標と解されますが，途中のコマンドでは，小文字のm, lは相対移動量を表します．（小文字のlと数字の1の区別が分かり易いようにイタリック体で示した．）

(4)は<path d="M 5,1 1,7 5,9 9,7 Z" style="stroke:blue;stroke-width:0.2;fill:none;" />としたもので，Zはclosepathを表し，Mで始まったパスの始点まで戻って閉じた線にする．
もちろん，最後に始点の座標を再度書けば「ほぼ」同じ結果が得られる．

(5)は<path d="M 5,1 1,7 5,9 9,7 5,1" style="stroke:blue;stroke-width:0.2;fill:none;" />としたもので，(4)のZコマンドによるclosepathの代わりに，始点の座標を再度書いたもので，(4)と「ほぼ」同じになるが，strokeが太い場合に，始点，終点が微妙に違う．始点を中心として両側に幅を付けた直線に対して，終点を重ねても「幅の外側の部分が欠けるため，閉じた多角形と少し違うものになる」．

x軸方向だけの移動，y軸方向だけの移動の場合は，短縮記号が使えます．H nでｙ座標を変えずにｘ座標だけnに移動する絶対移動，小文字の場合はh nでｙ座標を変えずにｘ座標だけn増加（減少）する相対移動を表し，V nでｘ座標を変えずにｙ座標だけnに移動する絶対移動，小文字の場合はv nでｘ座標を変えずにｙ座標だけn増加（減少）する相対移動を表します．縦または横移動が多いときはこちらが有利です．
(6)は<path d="M 5,1 V 2 H 3 v 4 h 5 Z" style="stroke:green;stroke-width:0.2;fill:none;" />としたもので，

ここまでは，lineやpolygonなどでもできるものですが，以下の「円弧」「楕円弧」は，pathで描けます．弧は，

<path d="M x1,y1 A rx,ry θ af sf x2,y2" /> の形で書き，M x1,y1で弧の開始点を表し，A(Arc)と書かれたらそこからは直線ではなくて弧を描くための7個の変数が並びます．
rx,ryで楕円のｘ半径，ｙ半径を表す．θは楕円全体を回転させる角度を表すがこれは，ここ４つの例ではθ=0のものを扱う．次のafは劣弧(0)，優弧(1)の区別を，sfは「反時計回りの向き(0)」に描いていくか「時計回りの向き(1)」に描いていくかを表し，最後のx2,y2が弧の終点の座標になります．

※時計回り，反時計回りの向きsweep-flag:sfについては，デフォルトの設定（ｘは右が正の向き，ｙは下が正の向き）で分かり易いように「時計」「反時計」で書きましたが，詳しくは下記の(13)参照

<path d="M 3,5 A 3,2 0 0 0 6,7" style="stroke:red;stroke-width:0.2;fill:none;" />
劣弧(0)は赤と青，そのうち反時計回り(0)は赤の弧
<path d="M 3,5 A 3,2 0 1 0 6,7" style="stroke:green;stroke-width:0.2;fill:none;" />
優弧(1)は緑とオレンジ，そのうち反時計回り(0)は緑の弧
<path d="M 3,5 A 3,2 0 0 1 6,7" style="stroke:blue;stroke-width:0.2;fill:none;" />
劣弧(0)は赤と青，そのうち時計回り(1)は青の弧
<path d="M 3,5 A 3,2 0 1 1 6,7" style="stroke:orange;stroke-width:0.2;fill:none;" />
優弧(1)は緑とオレンジ，そのうち時計回り(1)はオレンジの弧

Aから3個目の数字は，楕円をｘ軸に対して回転させる角度を表します．左の図はいずれも回転角30°の楕円です．
<path d="M 3,5 A 3,2 30 0 0 6,7" style="stroke:red;stroke-width:0.2;fill:none;" />
劣弧(0)は赤と青，そのうち反時計回り(0)は赤の弧
<path d="M 3,5 A 3,2 30 0 1 6,7" style="stroke:green;stroke-width:0.2;fill:none;" />
優弧(1)は緑とオレンジ，そのうち反時計回り(0)は緑の弧
<path d="M 3,5 A 3,2 30 1 0 6,7" style="stroke:blue;stroke-width:0.2;fill:none;" />
劣弧(0)は赤と青，そのうち時計回り(1)は青の弧
<path d="M 3,5 A 3,2 30 1 1 6,7" style="stroke:orange;stroke-width:0.2;fill:none;" />
優弧(1)は緑とオレンジ，そのうち時計回り(1)はオレンジの弧

半円の例
(9)
下半円<path d="M 2,5 A 3,3 0 0 0 8,5" style="stroke:red;stroke-width:0.2;fill:none;" />
上半円<path d="M 2,5 A 3,3 0 0 1 8,5" style="stroke:green;stroke-width:0.2;fill:none;" />
(10)
左半円<path d="M 5,2 A 3,3 0 0 0 5,8" style="stroke:blue;stroke-width:0.2;fill:none;" />
右半円<path d="M 5,2 A 3,3 0 0 1 5,8" style="stroke:orange;stroke-width:0.2;fill:none;" />
(11)
４分円
<path d="M 2,5 A 3,3 0 0 1 5,2" style="stroke:red;stroke-width:0.2;fill:none;" />
<path d="M 2,5 A 3,3 0 0 0 5,2" style="stroke:darkred;stroke-width:0.2;fill:none;" />
<path d="M 2,5 A 3,3 0 0 0 5,8" style="stroke:green;stroke-width:0.2;fill:none;" />
<path d="M 2,5 A 3,3 0 0 1 5,8" style="stroke:#003300;stroke-width:0.2;fill:none;" />
<path d="M 5,2 A 3,3 0 0 1 8,5" style="stroke:blue;stroke-width:0.2;fill:none;" />
<path d="M 5,2 A 3,3 0 0 0 8,5" style="stroke:darkblue;stroke-width:0.2;fill:none;" />
<path d="M 5,8 A 3,3 0 0 0 8,5" style="stroke:orange;stroke-width:0.2;fill:none;" />
<path d="M 5,8 A 3,3 0 0 1 8,5" style="stroke:tomato;stroke-width:0.2;fill:none;" />
(12)
上記の４分円を点(5,5)を中心に45°回転したもの
<path d="M 2,5 A 3,3 0 0 1 5,2" transform="rotate(45 5,5)" style="stroke:red;stroke-width:0.2;fill:none;" />
<path d="M 2,5 A 3,3 0 0 0 5,2" transform="rotate(45 5,5)" style="stroke:darkred;stroke-width:0.2;fill:none;" />
<path d="M 2,5 A 3,3 0 0 0 5,8" transform="rotate(45 5,5)" style="stroke:green;stroke-width:0.2;fill:none;" />
<path d="M 2,5 A 3,3 0 0 1 5,8" transform="rotate(45 5,5)" style="stroke:#003300;stroke-width:0.2;fill:none;" />
<path d="M 5,2 A 3,3 0 0 1 8,5" transform="rotate(45 5,5)" style="stroke:blue;stroke-width:0.2;fill:none;" />
<path d="M 5,2 A 3,3 0 0 0 8,5" transform="rotate(45 5,5)" style="stroke:darkblue;stroke-width:0.2;fill:none;" />
<path d="M 5,8 A 3,3 0 0 0 8,5" transform="rotate(45 5,5)" style="stroke:orange;stroke-width:0.2;fill:none;" />
<path d="M 5,8 A 3,3 0 0 1 8,5" transform="rotate(45 5,5)" style="stroke:tomato;stroke-width:0.2;fill:none;" />

※<path d="M x1,y1 A rx,ry θ af sf x2,y2" /> の，Aから5番目のパラメーターsfについて
次の図は，<svg width="100" height="100" viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">のように，ビューポートが(−5,−5)-(5,5)に設定された座標について，ｙ座標の向きがデフォルト（下が正）の場合と，数学座標に合わせてｙ座標の向きを上が正scale(1,−1)に設定した場合の角度の向きを調べたものです．

　seep-flag:sfを「ｘ軸の正の向きから，ｙ軸の正の向きへ，小さい方の角で回る向きを【正の向きsf=1】とし，その逆を【負の向きsf=0】とする」と

　赤で示した弧は，デフォルトの設定で下がｙ座標の正となるようにしたもので
<path d="M 3,0 A 3,3 0 0 1 0,3" style="stroke:red;stroke-width:0.2;fill:none;" />により，3,0から0,3へ劣弧にそって正の向きに回った0 1ことになります．

　青で示した弧は，scale(1,−1)により数学座標に合わせて上向きがｙの正の向きにしたもので
<path d="M 3,0 A 3,3 0 0 1 0,3" transform="scale(1,-1)" style="stroke:blue;stroke-width:0.2;fill:none;" />により，3,0から0,3へ劣弧にそって正の向きに回った0 1ことになります．
　ただし，3,0から0,3は，transform="scale(1,-1)"で変換された後の位置です．

　このようにして，large-arc-flag:afとsweep-flag:sfは，いずれも，小さい方（劣弧，負の角）で０，大きい方（優弧，正の角）で１と覚えると統一的に理解できるようです．
　ただし，正の角，負の角は，画面上の時計回り，反時計回りと視覚的に結びつけるのでなく，ｘ軸の正の向きからｙ軸の正の向きへ回る角が正とします．
　また，変換transformがあるときは，始点，終点の位置は，変換後の位置を表すことが重要です．

(14)はビューポートを(−5,−5)～(5,5)に設定したものです．
緑の線はtransform= "scale(1,-1)"によるｙ座標の上下逆転（数学座標と一致）後の点の座標で，(3,0)から(0,3)へ，半径rx=3,ry=3の円に沿って，優弧(1)を負の向き(0)に回ったと解釈できます．
<path d="M 3,0 A 3,3 0 1 0 0,3" transform= "scale(1,-1)" style= "stroke:green; stroke-width:0.2; fill:none;" />

オレンジの線はtransform= "scale(1,−1)"によるｙ座標の上下逆転（数学座標と一致）後の点の座標で，(3,0)から(0,3)へ，半径rx=3,ry=3の円に沿って，優弧(1)を正の向き(1)に回ったと解釈できます．
<path d="M 3,0 A 3,3 0 1 1 0,3" transform= "scale(1,-1)" style= "stroke:orange; stroke-width:0.2; fill:none;" />

(15)はビューポートを(−5,−5)～(5,5)に設定したものです．
<path d="M 2,0 A 2,2 0 1 0 0,2" transform="translate(-2,1) scale(1,-1)" style="stroke:red;stroke-width:0.2;fill:none;" />
scale(1,-1)により座標軸の上下の符号を逆にしてから，translate(-2,1)により左に2，下に1（scaleとは無関係に下を正として1）平行移動する．変換した後の座標で(2,0)～(0,2)が始点と終点になる．この2点を含む半径rx=2,ry=2の円周上の優弧(1)を負の向き(0)--scale(1,-1)の結果，時計回り--に回る．（暗赤色は正の向き(1)に回った場合）

<path d="M 2,0 A 2,2 0 1 0 0,2" transform="scale(1,-1) translate(-2,1)" style="stroke:red;stroke-width:0.2;fill:none;" />
translate(-2,1)により座標系を左に2，下に1移動してから，上下の符号を逆にする．その新座標で(2,0)～(0,2)が始点と終点になる．この２点を含む半径rx=2,ry=2の円周上の優弧(1)を負の向き(0)--scale(1,-1)の結果，時計回り--に回る．（灰色の弧は正の向きに回った場合）
<path d="M 2,0 A 2,2 0 1 1 0,2" transform="translate(-1,2) scale(1,-1)" style="stroke:green;stroke-width:0.2;fill:none;" />
scale(1,-1)により座標軸の上下の符号を逆にしてから，translate(-1,2)により左に1，下に2（scaleとは無関係に下を正として2）平行移動する．変換した後の座標で(2,0)～(0,2)が始点と終点になる．この2点を含む半径rx=2,ry=2の円周上の優弧(1)を負の向き(0)--scale(1,-1)の結果，反時計回り--に回る．（暗赤色は正の向き(1)に回った場合）
<path d="M 2,0 A 2,2 0 1 1 0,2" transform="scale(1,-1) translate(-1,2)" style="stroke:black;stroke-width:0.2;fill:none;" />
translate(-1,2)により座標系を左に1，下に2移動してから，上下の符号を逆にする．その新座標で(2,0)～(0,2)が始点と終点になる．この２点を含む半径rx=2,ry=2の円周上の優弧(1)を正の向き(1)--scale(1,-1)の結果，反時計回り--に回る．