結城永人サイトにインラインSVGで描画する場合に線の両端や頂点のデザインを付ける三つの属性が使える。SVG画像が実際にどんな形状で表示されるかとそれぞれの使い方のデザインについて考えてみたい。
stroke-linecapは線の両端の形状を指定する
三つの値を持っている。
butt（切り出し／真っ直ぐ）
stroke-linecap="butt"
初期値だから他を指定しなければ反映する。線の両端は線と同じ長さで真っ直ぐに切り出される。
round（丸い）
stroke-linecap="round"
線の両端は線自体よりも少し伸びて丸くなる。
square（平ら）
stroke-linecap="square"
線の両端は線自体よりも少し伸びて平らになる。デザインはbuttと同じだけれども長さだけが違う。
インラインSVGで描画された線の両端の形状がstroke-linecapの値から決められる。
線を引いて両端が繋がると頂点になるから切り放して線を引ける三つのタグでstroke-linecapの属性が使える。
- line：一本の線の両端
- polyline：一本の直線か折れ線の両端
- path：一本か複数本ならば個々の開始点と終了点の両端
pathタグはZコマンドで終了点を開始点のMコマンドと繋げると一本の線の両端が頂点になるからZコマンドを使わない場合にかぎられる。
stroke-linejoinは線の頂点の形状を指定する
三つの値を持っている。
miter（留め継ぎ／鋭い）
stroke-linejoin="miter"
初期値だから他の値を指定しなければ反映する。線の頂点は角度に従って鋭く尖って留め繋がれる。
round（丸い）
stroke-linejoin="round"
線の頂点は丸くなる。
bevel（傾斜／緩い）
stroke-linejoin="bevel"
線の頂点は角が取れて緩くなる。
インラインSVGで描画された線の頂点の形状がstroke-linejoinの値から決められる。
頂点を持つ図形は線だけではなくて角付きの面も含まれる。一本の線を引くだけのlineか真円のcircleか楕円のellipse以外のタグでstroke-linejoinの属性が使える。
- rect：四角の頂点
- polygon：三角などの多角形の頂点
- polyline：折れ線の場合の場合
- path：折れ線かZコマンドで繋げた場合の一本の線の開始点と終了点の頂点
rectタグはstroke-linejoin以外にrxとryで横と縦の頂点の角度を数値で変更できる。
stroke-miterlimitは頂点を変化を指定する
インラインSVGは線の頂点のデザインがmiterで、一定の値よりも角度が小さい場合にbevelに変化するようになっている。
小さな角度でmiterから変化したbevel
stroke-miterlimit="4"
デフォルトでは「4」だけれどもstroke-miterlimitの値を大きくすると頂点をもっと鋭角に保って表示できるようになる。小さくする場合は1以上を記載しなくてはならない。1未満の値はエラーで反映しない。
小さな角度でbevelに変化しないmiter
stroke-miterlimit="10"
線の幅を指定するstroke-widthに対する頂点の長さ（先端と内角の距離）の比率がstroke-miterlimitの値によって変化するように動作する。
stroke-miterlimitの値が基づく計算式
頂点の長さ / 線の幅 = 1 / sin (θ / 2)
※sin（サイン）は三角形の高さを斜辺で割った値、θ（シータ）は角度を表す。三角形の斜辺と高さの角度はそれぞれの割合からsinθと捉えられる。
例えば留め継ぎの限界が1.141だと90度以下のθでmiterからbevelへ移行し、4.0の限界だとおよそ29度以下のθでそうなります。そして10.0の限界だとおよそ11.5度以下のθでそうなります。
stroke-miterlimitの値が基づく計算式によると実際の半分の角度（θ / 2）のsinの値が頂点の長さに対する線の幅の比率になっていると分かる。
直角の90°ならば半分の45°のsinの値：約0.707（計算機ではDEGを使うとsinの値を角度で算出できる）で1を割ると「およそ1.141」というstroke-miterlimitの値が得られる。
1 / sin (θ / 2) = stroke-miterlimitの値
翻ってstroke-miterlimitの値から考えればデフォルトの4だと1を割ってそうなるsinの値：0.25を得られる約14.47°の二倍の約28.94°の角度まで／頂点の角度が「およそ29度以下」ではbevelに変化せずにmiterが保たれると掴める。
1 / stroke-miterlimitの値 = sin (θ / 2)
頂点の角度が一定ならば線の幅の増減に応じて頂点の長さも増減するけど、ただし増減する割合は前者よりも後者が同じか大きいから限界に到達する可能性は同じか入れ替わって上下する。
頂点の長さ = 線の幅 * stroke-miterlimitの値
stroke-miterlimitの値は頂点の長さを求めるために線の幅と掛け合わせる唯一の係数になっている。1以上を記載してしか使われないから後者と比べて前者が増減する割合は同じか上がるだけで、常に下がらないんだ。角度が一定の場合の頂点の長さは線が太いとさらに伸びると共に限界に達し易くなり、線が細いとさらに縮むと共に限界に達し難くなる。
一般的に線の頂点の長さが尖って鋭角になるほどに伸び過ぎてしまうのを制御するのがstroke-miterlimit属性なので、線の幅と比べてバランスが崩れるのを避けるために揃えたり、反対に敢えて線の頂点を大きく伸ばしたデザインを取るために役立つ。
コメント