如何处理带透明度SVG箭头虚线与间隙线的重叠问题？

要实现半透明圆形箭头虚线的间隙填充，同时解决箭头与虚线末端半圆的重叠问题，还得保证蓝色间隙线不受红色箭头线的透明度影响，用双重蒙版（mask）就能搞定，具体实现如下：

<svg xmlns="http://www.w3.org/2000/svg" width="350" height="100">
  <defs>
    <!-- 定义基础线条：完整实线、虚线样式 -->
    <polyline id="full-line" points="50,50 250,50" fill="none" stroke-width="10" stroke-linecap="round" />
    <polyline id="dash-line" points="50,50 250,50" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="40 30" />
    
    <!-- 蒙版1：控制蓝色线只显示在虚线的间隙里 -->
    <mask id="gap-mask" maskUnits="userSpaceOnUse">
      <!-- 白色实线当基底（显示区域） -->
      <use href="#full-line" stroke="white" />
      <!-- 黑色虚线覆盖（遮挡区域），蓝色线只会在没被黑色盖住的间隙显示 -->
      <use href="#dash-line" stroke="black" />
    </mask>
    
    <!-- 蒙版2：遮住红色虚线末端的半圆，避免和箭头重叠 -->
    <mask id="arrow-overlap-mask" maskUnits="userSpaceOnUse">
      <!-- 先画完整的红色虚线（带末端半圆） -->
      <use href="#dash-line" stroke="white" />
      <!-- 在半圆位置画黑色圆，把半圆挡住 -->
      <circle cx="250" cy="50" r="5" fill="black" />
    </mask>
  </defs>

  <!-- 蓝色间隙填充线：只显示间隙，透明度可单独调 -->
  <use href="#full-line" stroke="blue" mask="url(#gap-mask)" />

  <!-- 半透明红色箭头虚线：去掉末端半圆 -->
  <g opacity="0.5">
    <use href="#dash-line" stroke="rgb(255,0,0)" mask="url(#arrow-overlap-mask)" />
    <!-- 箭头图形 -->
    <polygon points="250,35 280,50 250,65" fill="rgb(255,0,0)" stroke="rgb(255,0,0)" stroke-width="5" stroke-linejoin="round" />
  </g>
</svg>

核心逻辑说明： #

• 间隙填充控制：gap-mask用白色实线打底，再用黑色虚线覆盖，这样蓝色线只会在黑色没覆盖到的空隙区域显示，完全不受红色线的透明度影响。
• 重叠消除：arrow-overlap-mask在虚线末端的半圆位置（半径等于线条宽度的一半）画黑色圆形，直接把半圆挡住，只留箭头显示。
• 分层独立：蓝色线和红色箭头线分开绘制，蓝色线的透明度可以单独设置（示例里是不透明，要透明的话给<use>加opacity属性就行），红色线的透明度只作用于自身和箭头。

这样既搞定了间隙填充，又消除了箭头和虚线的重叠，两条线的透明度还互不干扰。

内容的提问来源于stack exchange，提问作者personax