мишень штриховой линии для вогнутых фигур SVG

Question

Борьба за создание 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

Похоже, вы страдаете от отсечения.

Первая форма просто проходит до самого верхнего края, не имея достаточного пространства для отображения острой точки. Вместо 15 0 попробуйте 15 5. Тогда вы получите то, что не усеченный:

Тот же трюк работает со второй кривой. Но вместо того, чтобы просто одно значение у, вам нужно настроить в обоих ваших Q элементов, чтобы:

Q 50 65, 
    65 10 
Q 80 65, 

Но вырезка на этой второй кривой немного отличается. Это внутренний предел, а не один, наложенный формой области рисования. Таким образом, вместо того, чтобы регулировать кривой, уборщик способом будет регулировать внутреннюю митры вырезки путем добавления этого атрибута в пути:

stroke-miterlimit="10" 

Это приводит к очень высокой митре, который вы можете увидеть, если вы обложи оригинала путь в черном на вершине почти идентичного пути (только с разной предел митры) в красном цвете: