スキップしてメイン コンテンツに移動

些細な日常

インラインSVGのstroke-linecapとstroke-linejoinとstroke-miterlimitのデザイン

サイトにインライン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 Properties|Scalable Vector Graphics (SVG) 1.1 (Second Edition)(訳出)

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属性なので、線の幅と比べてバランスが崩れるのを避けるために揃えたり、反対に敢えて線の頂点を大きく伸ばしたデザインを取るために役立つ。

参考サイト
  • ブログの投稿者: 結城永人
  • タイトル: インラインSVGのstroke-linecapとstroke-linejoinとstroke-miterlimitのデザイン
  • 最終更新: 

コメント

最近の投稿

日付: 

冬の防寒対策として最も温めるべき首と手首と足首

イメージ

人気の投稿

平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない

イメージ

日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...

宜保愛子は本物の霊能力者だと考えられる三つの真実

イメージ

昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...

伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える

イメージ

プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...

後藤浩輝と抑鬱傾向による突発的な自殺

イメージ

中央競馬でトップ騎手の一人だった 後藤浩輝 が亡くなっていると気付いた。二千十五年だからまだ二年前の死だった。競馬ファンならば誰でも知っているくらい有名なはずだけれどもテレビのバラエティー番組でも見かけていたと思う。個人的には ダービースタリオン (ゲーム)に熱中していて後藤浩輝...