凹入SVG形状的stroke-linejoin斜接

Question

努力创建一个SVG，其尖线连接用于凹形。一个例子可能比单词更好：

我希望前两个（凹面）形状的顶部beziers像最后两个（凸面）形状一样锐利连接。但是，我一直无法做到这一点。有人可以开导我吗？

这些形状可以在this codepen找到。这是第一个形状的定义：

<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>

提前致谢！

Answer 1

看起来你正在遭受剪辑效果。

第一个形状只是运行到顶部边缘，没有足够的空间来显示尖点。而不是15 0尝试15 5。然后你会得到一些不被截断的东西：

同样的技巧适用于第二条曲线。但是，您需要调整两个Q元素，而不仅仅是一个y值：

 Q 50 65,
   65 10
 Q 80 65,

但是第二条曲线的剪裁略有不同。它是一个内部限制，而不是绘图区域形状所强加的限制。因此，不是调整曲线，更简洁的方法是通过将此属性添加到路径来调整内部斜接裁剪：

stroke-miterlimit="10"

这会导致一个非常高的斜角，如果你将原来的路径叠加在一条几乎相同的路径（只有不同​​的斜接限制）的黑色上，你可以看到它是红色的：