Why can’t I get the arrowhead in this picture to:
- have a rounded line join so it has a round “tip”
- have rounded ends
And why is the upper branch of the arrow truncated slightly?
Why can’t I get the arrowhead in this picture to:
And why is the upper branch of the arrow truncated slightly?
<marker>
elements have their own viewBox
. Because your path coordinates start right at the edge of the marker’s viewBox
, part of the stroke width (and its caps) gets cut off.
Either try offsetting your path coordinates so that they lie within the viewBox, or add a viewBox attribute to the marker in which you slightly increase the visible area.