用于凹面 SVG 形状的 stroke-linejoin miter

Question

正在努力创建一个 SVG，该 SVG 具有用于凹形的锐线连接。一个例子可能比文字更好：

我希望前两个（凹）形状的顶部贝塞尔曲线像后两个（凸）形状一样锐利地连接在一起。但是，我一直无法做到这一点。有没有人能赐教一下？

可以在 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

您似乎遇到了剪裁效果。

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

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

 Q 50 65,
   65 10
 Q 80 65,

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

stroke-miterlimit="10"

这会导致非常高的斜接，如果将黑色的原始路径覆盖在几乎相同的红色路径（只是斜接限制不同）上，您可以看到它：

用于凹面 SVG 形状的 stroke-linejoin miter

stroke-linejoin miter for concave SVG shapes

svg

clipping