svg - 自重叠 svg 路径

Question

我想知道如何突出显示(更改颜色)SVG 路径(甚至折线)的自重叠 区域。实际上，如果我更改路径的不透明度和描边属性，则自叠加区域的颜色没有变化。
例如，具有以下路径 <path d="M187 240 L188 240 L315 217 L317 217 L330 306 L247 233 L258 226 L292 222 L303 178 L353 165" fill="none" opacity="0.6" stroke-width="14" stroke = "red"/> , 重叠区不是红暗区。
这是我到目前为止发现的，但对我没有帮助。 http://www.svgopen.org/2005/papers/abstractsvgopen/index.html#S2.
谢谢

Answer 1

弄乱不透明度不会有帮助，因为路径是一次性渲染的，它与自身重叠多少次无关紧要。重要的是像素是否被认为是路径笔画的“内部”。如果是，它会被赋予最终的线条颜色和不透明度。

据我所知，基本上没有好的简单解决方案可以解决您的问题。您可以获得的最接近的是单独绘制所有单独的线段。这样你的不透明度技巧将突出显示重叠(使用 stroke-opacity 而不是 opacity)，但线段之间的连接看起来不太好。它们会有间隙，您也会在那里看到重叠效果。

<svg width="500" height="500" fill="none" stroke-opacity="0.6" stroke-width="14" stroke = "red">
                         
  <path d="M187 240 L188 240" />
  <path d="M188 240 L315 217" />
  <path d="M315 217 L317 217" />
  <path d="M317 217 L330 306" />
  <path d="M330 306 L247 233" />
  <path d="M247 233 L258 226" />
  <path d="M258 226 L292 222" />
  <path d="M292 222 L303 178" />
  <path d="M303 178 L353 165" />

</svg>

唯一好的解决方案是从数学上确定重叠，然后生成正确形状的“重叠多边形”。这是一段相当棘手的代码。