svg路径内的相邻线条，具有笔划宽度

Question

我有一个在路径中有多行的svg。

<path stroke-width="13" stroke="black" fill="orange" d="M 100 100 L 300 100 Z L200 300 z"/>

由于笔划宽度，线条相交

是否有任何方法可以使路径连续而不改变＆＃34; d＆＃34;属性？

编辑：

我感兴趣的是如何在定义笔触宽度的同时控制同一路径内多个对象的连接。

如果我要改变＆＃34; d＆＃34;属性并删除中间的Z，使得线形成三角形，笔划问题将消失

Answer 1

对于两条在一定程度上相遇的线而言，这是一个悬而未决的问题。 （您是否有机会使用Firefox？I saw something very similar recently.）

如果您希望在两个不相交的线段之间进行整齐的连接，最好的方法是通过将stroke-linejoin="round"和stroke-linecap="round"添加到路径元素来绘制圆顶端盖。

如果我的怀疑是正确的，您可以通过将fill="orange"更改为fill="none"来解决问题。试试这个：

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