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