元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

【SVG】線の形状

線の端点と接続点の形状を指定する属性があります。線の端の処理をどのようにするのかを指定できます。合わせて破線の指定の仕方を見ていきます。線の細部の扱いまで細かく指定できます。小さいことかもしれませんが、見た目の印象が変わります。

端点の形状:stroke-linecap

<symbol id="hline" stroke-width="10" stroke="deepskyblue">
  <line x1="20" y1="15" x2="80" y2="15"/>
</symbol>

<g stroke-width="0.1" stroke="darkorange">
  <line x1="20" y1="5" x2="20" y2="65"/>
  <line x1="80" y1="5" x2="80" y2="65"/>
</g>

<use href="#hline" stroke-linecap="butt"/>
<use href="#hline" y="20" stroke-linecap="round"/>
<use href="#hline" y="40" stroke-linecap="square"/>

<g font-size="6" font-family="serif" text-anchor="middle" fill="white">
  <text x="50" y="17">butt</text>
  <text x="50" y="37">round</text>
  <text x="50" y="57">square</text>
</g>

butt round square

  • butt:端点の位置で切られた形
  • round:半円の形
  • square:端点の位置からはみ出した形

接続点の形状:stroke-linejoin

<symbol id="corner" stroke-width="8" stroke="greenyellow" fill="none">
  <polyline points="5,60 30,20 55,60"/>
</symbol>

<use href="#corner" stroke-linejoin="miter"/>
<use href="#corner" x="20" stroke-linejoin="round"/>
<use href="#corner" x="40" stroke-linejoin="bevel"/>

<g font-size="6" font-family="serif" text-anchor="middle" fill="steelblue">
  <text x="30" y="10">miter</text>
  <text x="50" y="10">round</text>
  <text x="70" y="10">bevel</text>
</g>

miter round bevel

  • miter:尖った形
  • round:丸い形
  • bevel:角を削った形

破線:stroke-dasharray

SVGでは、stroke-dasharrayという属性に、破線のパターンをあらわす記述を設定することによって、指定されたパターンで破線を描画することができるようになっている。破線のパターンは、線の長さと間隔の長さを、コンマで区切って並べたもの。

<symbol id="stroke" stroke-width="5" stroke="midnightblue" fill="none">
  <line x1="10" y1="15" x2="90" y2="15"/>
</symbol>
<use href="#stroke" stroke-dasharray="2"/>
<use href="#stroke" y="14" stroke-dasharray="2, 5"/>
<use href="#stroke" y="28" stroke-dasharray="2, 5, 8"/>
<use href="#stroke" y="42" stroke-dasharray="2, 5, 8, 3"/>
<g font-size="6" font-family="serif" fill="coral">
  <text x="10" y="11">2</text>
  <text x="10" y="25">2, 5</text>
  <text x="10" y="39">2, 5, 8</text>
  <text x="10" y="53">2, 5, 8, 3</text>
</g>

2 2, 5 2, 5, 8 2, 5, 8, 3

まとめ

  • 端点の形状:stroke-linecap
  • 接続点の形状:stroke-linejoin
  • 破線:stroke-dasharray