有没有办法将两个不透明的 SVG 组合在一起，并且在重叠时只显示一个 SVG？

Question

我想填充箭头线中的间隙，以及不透明度小于1的箭头线。我在下面的代码片段中实现了这一点，但我注意到它会导致重叠问题。我想删除半圆重叠区域。为此，我尝试将间隙线与箭头线混合。
但是，我遇到了一个问题，箭头线的不透明度影响了间隙线。我只是想消除半圆并确保间隙线的不透明度不受箭头线的影响。
有办法实现这个目标吗？ （也许最糟糕的方法是掩盖半圆......） 这是我的 codepen 演示：https://codepen.io/cactusxx/pen/gOqaQxQ

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <polyline id="p1" points="50,50 250,50" fill="none" stroke-width="10" stroke-linecap="round" />
    <mask id="m1" maskUnits="userSpaceOnUse">
      <use href="#p1" stroke="white" />
      <use href="#p1" stroke="black" stroke-dasharray="40 30" />
    </mask>
  </defs>

  <!--   blue gap line-->
  <use href="#p1" stroke="blue" mask="url(#m1)" />
  <!--   line with arrow -->
  <g fill-opacity="0.5">
    <use href="#p1" stroke="rgb(255,0,0)" stroke-dasharray="40 30" stroke-opacity="0.5" />
    <!--     arrow -->
    <polygon id="arrowPoly" points="250,35 280,50 250,65" fill="rgb(255,0,0)" />
  </g>

</svg>

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!--     blend blue line with SourceGraphic -->
    <polyline id="pp" points="50,50 250,50" fill="none" stroke-width="10" stroke="blue" stroke-linecap="round" />
    <filter id="blend" filterUnits="userSpaceOnUse">
      <feImage x="0" y="0" xlink:href="#pp" result="backline" />
      <feBlend in="SourceGraphic" in2="backline" mode="normal" />
    </filter>
  </defs>

  <g opacity="0.5" filter="url(#blend)">
    <use href="#p1" stroke="rgb(255,0,0)" stroke-dasharray="40 30" />
    <!--     arrow -->
    <polygon id="arrowPoly" points="250,35 280,50 250,65" fill="rgb(255,0,0)" />
  </g>

</svg>

Answer 1

正如我评论的那样，您可以将

<polygon id="arrowPoly"

放在蒙版内，并将

<use>

arrowPoly 放在代码末尾。

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <polyline id="p1" points="50,50 250,50" fill="none" stroke-width="10" stroke-linecap="round" />
    <mask id="m1" maskUnits="userSpaceOnUse">
      <use href="#p1" stroke="white" />
      <use href="#p1" stroke="black" stroke-dasharray="40 30" />
      <polygon id="arrowPoly" points="250,35 280,50 250,65"   /> 
    </mask>
  </defs>

  <!--   blue gap line-->
  <use href="#p1" stroke="blue" mask="url(#m1)" />
  <!--  line with arrow -->
 <g opacity=".5" >
    <use href="#p1" stroke="rgb(255,0,0)" stroke-dasharray="40 30" />
    <!--  arrow -->
   <use href="#arrowPoly" fill="rgb(255,0,0)"/>
  </g>

</svg>