SVGの装飾

線の太さ

<svg stroke="#1c8b94" width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="10" y1="10" x2="190" y2="190" stroke-width="5">
</svg>

プロパティ	意味
strokeWidth	線の太さ

線の色

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="10" y1="10" x2="190" y2="190" stroke="#1c8b94" stroke-width="5">
</svg>

プロパティ	意味
stroke	線の色

破線

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="10" y1="10" x2="190" y2="190" stroke-dasharray="4 4" stroke-dashoffset="0" stroke="#1c8b94" stroke-width="5">
</svg>

プロパティ	意味
stroke-dasharray	破線/余白の長さ
stroke-dashoffset	破線の開始位置

stroke-dasharrayは、線 余白 線 余白...と、線と余白の長さを交互に記述し、線の終点に辿り着くまでループして描画を行う。