自我重叠的SVG路径

Question

Http：//www.svgopen.org/2005/papers/abstractsvgopen/index.html#s2.

谢谢

用不透明的态度无济于事，因为这条路径是在一个通行证中呈现的，而且它本身重叠的次数都无关紧要。  最重要的是，像素是否被视为“内部”路径中风。  如果是，则给出了最终的颜色和不透明度。

据我所知，基本上没有很好的简单解决方案解决您的问题。  您可以获得的最接近的是单独绘制所有单个线段。  这样，您的不透明度技巧将突出重叠（使用

stroke-opacity
而不是opacity），但是线段之间的连接看起来不会很好。 他们会有空白，您也会看到那里的重叠效果。

Answer 1

<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>

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

这里是适合您的版本（尽管它使线路比我们想要的要脆得多）。它采用了保罗建议的内容，但通过使用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>

Answer 2

10年后...您可以使用CSS弄乱不同部分的相互作用。最简单的事情是找到一个适合您的值的值 - 可能需要使用不同的颜色甚至渐变的玩具才能获得所需的效果：

https：//developer.mozilla.org/en-us/docs/web/css/mix-blend-mode

Html：

mix-blend-mode

CSS：

Answer 3

https：//codepen.io/chris-moschini/pen/ggrpqpa