Search code examples
svgclipping

stroke-linejoin miter for concave SVG shapes

Struggling to create an SVG with a sharp line join for concave shapes. An example is probably better than words:

Concave/convex

I'd like the top beziers of the first two (concave) shapes to be sharply joined like the last two (convex) shapes. However, I've been unable to accomplish this. Can anybody enlighten me?

These shapes can be found at this codepen. This is the definition of the first shape: 

<svg width="130px" height="110px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path fill="#ffffff" stroke="#000000" stroke-width="5" stroke-linejoin="miter"
    d="M 15 100
       Q -10 62,
         15 0
       Q 50 80,
         115 100
       ">
  </path>
</svg>

Thanks in advance!

Solution

  • It looks like you're suffering clipping effects.

    The first shape simply runs to the very top edge, not having enough space to display the sharp point. Instead of 15 0 try 15 5. Then you'll get something that isn't truncated:

    revised image

    The same trick works with the second curve. But instead of just the one y value, you need to adjust in both your Q elements, to:

     Q 50 65,
   65 10
 Q 80 65,

    But the clipping on this second curve is slightly different. It's an internal limit, not one imposed by the shape of the drawing area. So instead of adjusting the curve, a cleaner way would be to adjust the internal miter clipping by adding this attribute to your path:

    stroke-miterlimit="10"

    That results in a really tall miter, which you can see if you overlay your original path in black atop an a nearly identical path (with just the different miter limit) in red:

    differently mitered