自重叠 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>

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

Answer 2

这是一个适合您的版本（尽管它使线条比我们想要的更清晰）。它采用了 Paul 的建议，但通过使用 2 段线对其进行了改进，以便正确渲染线连接，然后使用过滤器选择和重新着色重叠的高不透明度区域。表格值被设置为仅选择真正的重叠，并选择由于我们是双重绘图的事实而导致的线连接处的小重叠伪影。您可能会在最后一行的“手动抗锯齿”中添加一个非常小的模糊。

<svg width="800px" height="600px" viewBox= "0 0 800 600">
  <defs>
    <filter id="overlappy">
     <feComponentTransfer result="overlap">
       <feFuncA type="table" tableValues="0 0 0 0 0 0 0 0 1"/>
      </feComponentTransfer>
      <feColorMatrix in="overlap" result="solid-blue" type="matrix" values ="0 0 0 0 0
                                                         0 0 0 0 0 
                                                         0 0 0 0 1 
                                                         0 0 0 4 0"/>
         <feColorMatrix in="SourceGraphic" result="opaque-source" type="matrix" 
                                                values ="1 0 0 0 0
                                                         0 1 0 0 0 
                                                         0 0 1 0 0 
                                                         0 0 0 4 0"/>
      <feComposite operator="atop" in="solid-blue" in2="opaque-source"/>
      
    </filter>
  </defs>
  
  <g filter="url(#overlappy)" fill="none"  stroke="red" stroke-width="4" stroke-opacity="0.5">
  <path d="M187 240 L188 240 L315 217"  />
  <path d="M188 240 L315 217 L317 217" />
  <path d="M315 217 L317 217 L330 306" />
  <path d="M317 217 L330 306 L247 233"/>
  <path d="M330 306 L247 233 L258 226" />
  <path d="M247 233 L258 226 L292 222" />
  <path d="M258 226 L292 222 L303 178" />
  <path d="M292 222 L303 178 L353 165"  />
  <path d="M303 178 L353 165" />
  </g>

</svg>