Adjacent lines inside svg path with stroke-width

Question

I have a svg with multiple lines inside a path.

<path stroke-width="13" stroke="black" fill="orange" d="M 100 100 L 300 100 Z L200 300 z"/>

Because of the stroke-width the lines intersect

Is there any way of making the path continuous without altering the "d" attribute?

Edit:

I am interested in how you can control the joins of multiple objects inside the same path while having a stroke-width defined.

If I would change the "d" attribute and remove the middle Z so that the lines form a triangle the stroke problem would disappear

Answer 1

That's one hell of an overhang for two lines that meet at a point. (Are you using Firefox by any chance? I saw something very similar recently.)

If you want a neat join between two disjoint line segments, your best bet would be to draw them with rounded end caps by adding stroke-linejoin="round" and stroke-linecap="round" to the path element.

And if my suspicion is correct, you can fix the overhang problem by changing fill="orange" to fill="none". Try this:

<svg viewBox="50 50 400 400" width="350" height="350">
  <path stroke-width="13"
        stroke="black"
        fill="none"
        stroke-linejoin="round"
        stroke-linecap="round"
        d="M 100 100 L 300 100 Z L200 300 z"
        />
</svg>