0

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 intersectenter image description here

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

Community
  • 1
  • 1
adrianvlupu
  • 4,188
  • 3
  • 23
  • 29
  • possible duplicate of [Can you control how an SVG's stroke-width is drawn?](http://stackoverflow.com/questions/7241393/can-you-control-how-an-svgs-stroke-width-is-drawn) – Paulie_D Mar 18 '15 at 14:29
  • I don't believe it's a duplicate. I'm more interested in how to handle the join between objects while having a stroke-width rather than changing the stroke's location. – adrianvlupu Mar 18 '15 at 14:36
  • 1
    You're suffering from [bug 854296](https://bugzilla.mozilla.org/show_bug.cgi?id=854296) It's a Windows only bug that will be fixed in Firefox 37 so not long to go now. – Robert Longson Mar 18 '15 at 16:51

1 Answers1

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>
Community
  • 1
  • 1
r3mainer
  • 23,981
  • 3
  • 51
  • 88