Line caps in SVG

A simple example of line cap styles in SVG.
<!DOCTYPE html>
<html>
<body>

<svg height="500" width="500">
  <g fill="none" stroke="blue" stroke-width="20">
    <path stroke-linecap="square" d="M25 100 l215 0" />
    <path stroke-linecap="round" d="M25 60 l215 0" />
    <path stroke-linecap="butt" d="M25 20 l215 0" />
  </g>
</svg>
 
</body>
</html>

Responses

0 Replies