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段线来改进它，因此线连接被正确渲染，然后它使用滤镜来选择和重新着色重叠的高不透明度区域。表值被精确设置为仅选择真正的重叠，并选择由于我们进行双重绘制而在线连接处引起的小重叠伪像。你可能会添加一个非常小的模糊到'＃34＃hand anti-alias＆＃34;最后一行。

＆＃13;

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

＆＃13;

自我重叠的svg路径

2 个答案: