How to make the edge/end of a line in svg pointed

Question

I want to make a line with svg which is pointed so how can we do it
<line x1="8" y1="45" x2="350" y2="45"
style="stroke:brown; stroke-linecap:???;
stroke-width:5" />

Answer 1

I don’t think that there is something for pointed. Instead, I would put some triangles on the end.

Answer 2

Use marker tag to define marker-start (start point) and marker-end (end point)

<svg width="300px" height="100px">
<defs>
<marker id="point" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto" markerUnits="strokeWidth">
<circle cx="5" cy="5" r="2" fill="#000" />
</marker>
</defs>
<line x1="50" y1="50" x2="250" y2="50" stroke="#000" stroke-width="8" marker-end="url(#point)" />
</svg>
https://code.sololearn.com/WXumHN75MjrI/?ref=app