4.7 Line Caps and joins

stroke-linecap: butt (default, not extended), round (extended), square (extended)

When drawing a <line> or <polyline>, you may specify the shape of the endpoints of the lines by setting the stroke-linecap style property to one of the values butt(default), round, or square.

 <svg width="200px" height="200px" viewBox="0 0 100 100">
    <use xlink:href="grids.svg#grid_100x100"/>
    <line x1="30" y1="20"  x2="70" y2="20" style="stroke-linecap:butt; fill:none; stroke:rgba(44,95,45,0.5);  stroke-width:10"/>
    <line x1="30" y1="50"  x2="70" y2="50" style="stroke-linecap:round; fill:none; stroke:rgba(44,95,45,0.5);  stroke-width:10"/>
    <line x1="30" y1="80"  x2="70" y2="80" style="stroke-linecap:square; fill:none; stroke:rgba(44,95,45,0.5);  stroke-width:10"/>
</svg>
stroke-linejoin: miter, round, bever

You can specify the way lines connect at the corners of a shape by assigning the style property stroke-linejoin one of the following values:
miter (pointed), round, or bevel.

<svg width="200px" height="200px" viewBox="0 0 100 100">
    <use xlink:href="grids.svg#grid_100x100"/>
    <polyline style="stroke-linejoin: miter; stroke: rgba(44,95,45,0.5); stroke-width: 12; fill: none;"
            points="30 30, 50 10, 70 30"/>
    <polyline style="stroke-linejoin:round; stroke: rgba(44,95,45,0.5); stroke-width: 12; fill: none;"
            points="30 60, 50 40, 70 60"/>
    <polyline style="stroke-linejoin:bevel; stroke-width: 12; stroke: rgba(44,95,45,0.5); fill: none;"
            points="30 90, 50 70, 70 90"/>
</svg>
stroke-miterlimit = "4" (default value)

If your lines meet at a sharp angle and have a mitered join, it's possible for the pointed part to extend beyond the lines' thickness.
You may set the ratio of the miter to the thickness of the lines being joined with the stroke-miterlimit style property; its default value is 4.

 <svg width="200px" height="200px" viewBox="0 0 100 100">
    <use xlink:href="grids.svg#grid_100x100"/>
    <polyline
        style="stroke-linejoin:miter; stroke-miterlimit:4;stroke: rgba(44,95,45,0.5); stroke-width: 10; fill: none;"
               points="10 90, 20 40, 30 90"/>
    <polyline
        style="stroke-linejoin:miter; stroke-miterlimit:6; stroke: rgba(44,95,45,0.5); stroke-width: 10; fill: none;"
            points="50 90, 60 40, 70 90"/>
</svg>