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

サイトに インラインSVG で描画する場合に線の両端や頂点のデザインを付ける三つの属性が使える。SVG画像が実際にどんな形状で表示されるかとそれぞれの使い方のデザインについて考えてみたい。 stroke-linecapは線の両端の形状を指定する 三つの値を持っている。 butt(切り出し/真っ直ぐ) stroke-linecap="butt" 初期値だから他を指定しなければ反映する。線の両端は線と同じ長さで真っ直ぐに切り出される。 round(丸い) stroke-linecap="round" 線の両端は線自体よりも少し伸びて丸くなる。 square(平ら) stroke-linecap="square" 線の両端は線自体よりも少し伸びて平らになる。デザインはbuttと同じだけれども長さだけが違う。 インラインSV…