在SVG中绘制结

Question

我正在尝试使用路径在SVG中渲染一个简单的结，尽管我没有承诺在任何其他SVG元素上使用路径。我遇到的困难在于显示结的重叠，因为SVG元素倾向于相交。

我在下面列出了两次失败的尝试，第一次说明了交叉点问题，第二次是克服了它，但是线条的新问题没有出现连续性（角落现在有重叠）。

如何进行以使渲染图像看起来像是一条连续的线条，以便重叠/相交的部分清楚地描绘哪个部分位于顶部，哪个部分位于下方。

编辑：

第一个例子只是一个封闭的路径，其后面有一个略大的行程宽度的第二个封闭路径。第二个例子是相同的模式，但由几个路径组成。

Answer 1

实现结的主要方法有两种（我还是使用过）：

1. 使用多个路径并隐藏其他行后面的联接
2. 使用重叠段重绘交叉点

大多数情况下，您可能不得不使用技术（2）。这就是我在下面用来重现你的结的方法：

＆＃13;
＆＃13;
<svg width="300" height="300" viewBox="0 0 100 100">

    <polygon points="20,80 60,15 45,20 70,90"
             fill="none" stroke="#666" stroke-width="6" stroke-linejoin="round"/>
    <polygon points="20,80 60,15 45,20 70,90"
             fill="none" stroke="#69c" stroke-width="3" stroke-linejoin="round"/>
    
    <!-- overlay segment -->
    <polyline points="45,20 70,90"
          fill="none" stroke="#666" stroke-width="6" stroke-linejoin="round"/>
    <polyline points="60,15 45,20 70,90 20,80"
          fill="none" stroke="#69c" stroke-width="3" stroke-linejoin="round"/>

</svg>
＆＃13;
＆＃13;
＆＃13;

如果我重新着色叠加层，您可以看到我是如何做到的：

＆＃13;
＆＃13;
<svg width="300" height="300" viewBox="0 0 100 100">

    <polygon points="20,80 60,15 45,20 70,90"
             fill="none" stroke="#666" stroke-width="6" stroke-linejoin="round"/>
    <polygon points="20,80 60,15 45,20 70,90"
             fill="none" stroke="#69c" stroke-width="3" stroke-linejoin="round"/>
    
    <!-- overlay segment -->
    <polyline points="45,20 70,90"
          fill="none" stroke="red" stroke-width="6" stroke-linejoin="round"/>
    <polyline points="60,15 45,20 70,90 20,80"
          fill="none" stroke="green" stroke-width="3" stroke-linejoin="round"/>

</svg>
＆＃13;
＆＃13;
＆＃13;

绿色覆盖线比红色覆盖线延伸得更远，以覆盖红色覆盖线延伸该线段的整个长度的事实。红线末端的两个角需要重新绘制。

我是这样做的，所以我可以重新使用现有的路径点，而不必担心计算线路较短段的坐标。但有时候，如果你有更复杂的路径，你可能会被迫这样做。以下是一个示例：

＆＃13;
＆＃13;
<svg width="300" height="300" viewBox="0 0 100 100">

    <polygon points="20,80 60,15 45,20 70,90"
             fill="none" stroke="#666" stroke-width="6" stroke-linejoin="round"/>
    <polygon points="20,80 60,15 45,20 70,90"
             fill="none" stroke="#69c" stroke-width="3" stroke-linejoin="round"/>
    
    <!-- overlay segment -->
    <polyline points="46.79,25 53.93,45"
          fill="none" stroke="red" stroke-width="6" stroke-linejoin="round"/>
    <polyline points="46.79,25 53.93,45"
          fill="none" stroke="green" stroke-width="3" stroke-linejoin="round"/>

</svg>
＆＃13;
＆＃13;
＆＃13;