I want to fill the gap in the arrow line, and the arrow line with opacity less than 1. I achieved this in the following code snippet, but I noticed it causes an overlap problem. I'd like to remove the semi-circle overlap area. To do this, I attempted to blend the gap line with the arrow line.
However, I encountered an issue where the opacity of the arrow line affected the gap line. I simply want to eliminate the semi-circle and ensure that the opacity of the gap line is not influenced by the arrow line.
Is there a way to accomplish this goal? (Maybe the worst way is to mask the semi-circle...)
<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>