绘制重叠自身标记重叠的路径

【问题标题】：Plot path that overlaps itself marking overlappings绘制重叠自身标记重叠的路径
【发布时间】：2020-11-15 15:19:24
【问题描述】：

我正在尝试使用svg.js 在其wiki 中绘制trefoil knot 参数化（但如果有必要我可以更改工具）。问题是我无法像 here 那样标记重叠的区域。

我想认为做那个例子的人以一种聪明的方式来绘制它，避免一个一个地处理这些空间中的每一个，因为否则做类似 svg 的事情会有点贵（相对于时间而言），如果你需要改变模型（或只是另一个结）。

有谁知道它是如何完成的，或者是手工解决一个一个地处理每个空间的？

【问题讨论】：

如果您查看code，您会发现它使用了 6 条路径：3 条用于黑色结，3 条用于白色结。

标签： javascript svg plot svg.js

【解决方案1】：

基本的想法是掩盖干扰。对于 DRY 代码，首先将渲染路径定义为模板以供重用。

path {
    fill: none;
    stroke: black;
}
mask rect {
    fill: white;
}
.shadow {
    stroke-width: 20;
}
.knot {
    stroke-width: 10;
}

<svg style="width:100px;" viewBox="0 0 100 100">
  <defs>
    <!-- path templates for multiple use -->
    <path id="lower" d="M10 10 90 90" />
    <path id="higher" d="M10 90 90 10" />
    <mask id="mask">
      <!-- white background: everything is visible -->
      <rect width="100%" height="100%" />
      <!-- black line: masked out space for higher path -->
      <use href="#higher" class="shadow" />
    </mask>
  </defs>
  <!-- lower path with masked-out gap -->
  <use href="#lower" mask="url(#mask)" class="knot" />
  <!-- higher path uninterrupted -->
  <use href="#higher" class="knot" />
</svg>

【讨论】：

Don't repeat yourself.