重叠本身标记重叠的绘图路径

Question

我试图用三叶结来绘制参数化的svg.js，就像它的wiki中那样(但如果有必要的话，我可以更改这个工具)。问题是，我无法实现标记与其重叠的区域，比如这里。

我想，做这个例子的人用一种聪明的方式来设计它，避免一个接一个地处理这些空间，因为如果你需要改变模型(或者只是另一个结)，做这样的事情会花费一些(相对于时间)。

有没有人知道它是怎么做的，或者是一个一个地手工处理每一个空间？

Answer 1

基本的想法是掩盖干扰。对于干代码，首先将呈现的路径定义为可重用的模板。

​

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>

​