针对你遇到的空心圆形标记内部显示路径线条的问题，这里有几个通用的解决方案，不需要手动缩短路径或复制大量元素：

方法1：用实心圆遮挡（适用于纯色背景场景） #

这是最简单的方案，在标记的空心圆下方添加一个与背景色一致的实心圆，直接挡住穿过标记的路径线条：

<svg width="200" height="200">
  <marker id="line-start" markerWidth="14" markerHeight="14" refX="14" refY="7" markerUnits="userSpaceOnUse" orient="auto-start-reverse" overflow="visible">
    <!-- 实心圆覆盖线条，颜色与背景一致 -->
    <circle fill="#ffffff" cx="7" cy="7" r="7" />
    <!-- 空心描边圆 -->
    <circle fill="none" stroke="#666" cx="7" cy="7" r="7" />
  </marker>
  <path stroke="#666" marker-start="url(#line-start)" marker-end="url(#line-start)" stroke-width="2" d="M10,100 L 190,100" />
</svg>

• 优点：实现简单，性能好
• 缺点：仅适用于纯色背景，如果背景是渐变、透明或复杂图案，这个方法会失效

方法2：使用蒙版分离路径与标记（通用场景） #

这个方案通过蒙版隐藏路径在标记位置的部分，再单独渲染标记，完美适配任意背景和任意路径：

<svg width="200" height="200">
  <!-- 定义空心圆形标记 -->
  <marker id="line-mark" markerWidth="14" markerHeight="14" refX="14" refY="7" markerUnits="userSpaceOnUse" orient="auto-start-reverse" overflow="visible">
    <circle fill="none" stroke="#666" cx="7" cy="7" r="7" />
  </marker>

  <!-- 创建蒙版：用标记形状遮挡路径对应区域 -->
  <mask id="mask-mark-area">
    <!-- 蒙版底色设为白色（显示区域） -->
    <rect width="100%" height="100%" fill="white" />
    <!-- 用黑色绘制标记形状，蒙版中黑色区域会变成透明（隐藏路径） -->
    <path stroke="none" marker-start="url(#line-mark)" marker-end="url(#line-mark)" d="M10,100 L 190,100">
      <set attributeName="fill" to="black" />
    </path>
  </mask>

  <!-- 第一步：渲染路径，但标记位置被蒙版隐藏 -->
  <path stroke="#666" stroke-width="2" d="M10,100 L 190,100" mask="url(#mask-mark-area)" />
  <!-- 第二步：单独渲染标记，路径本身无描边 -->
  <path stroke="none" marker-start="url(#line-mark)" marker-end="url(#line-mark)" d="M10,100 L 190,100" />
</svg>

• 优点：完全通用，适配任意路径、任意背景和复杂标记形状
• 缺点：需要额外的蒙版和路径副本，但对于SVG来说性能影响可以忽略

方法3：利用滤镜擦除标记区域的线条 #

通过自定义滤镜，在标记所在位置“擦除”路径的线条，也能达到效果：

<svg width="200" height="200">
  <!-- 定义擦除滤镜 -->
  <filter id="erase-mark" x="-100%" y="-100%" width="300%" height="300%">
    <!-- 先绘制路径的描边 -->
    <feFlood flood-color="#666" result="stroke" />
    <feComposite in="stroke" in2="SourceGraphic" operator="in" result="original-stroke" />
    <!-- 绘制标记的实心区域，用于擦除 -->
    <feFlood flood-color="#ffffff" result="mark-erase" />
    <feComposite in="mark-erase" in2="SourceGraphic" operator="in" result="erase-area" />
    <!-- 用擦除区域减去原描边 -->
    <feComposite in="original-stroke" in2="erase-area" operator="out" />
  </filter>

  <marker id="line-start" markerWidth="14" markerHeight="14" refX="14" refY="7" markerUnits="userSpaceOnUse" orient="auto-start-reverse" overflow="visible">
    <circle fill="none" stroke="#666" cx="7" cy="7" r="7" />
    <!-- 添加一个临时的实心圆，用于滤镜识别擦除区域 -->
    <circle fill="red" cx="7" cy="7" r="7" opacity="0" />
  </marker>

  <!-- 路径应用滤镜 -->
  <path stroke="#666" marker-start="url(#line-start)" marker-end="url(#line-start)" stroke-width="2" d="M10,100 L 190,100" filter="url(#erase-mark)" />
</svg>

• 优点：不需要额外的路径副本，适合复杂场景
• 缺点：滤镜的调试相对复杂，部分老旧浏览器可能兼容性稍差

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