如何在 SVG 中绘制“空”圆圈作为线条的标记？

Question

我正在尝试在 SVG 中绘制空圆圈作为线条的标记。我遇到的问题是我可以看到空圆圈内的线条。我怎样才能“擦除”它？ 我考虑过的选项：

1. 将线条调整为更短，并将标记放置在线条“外侧”。不幸的是，这不适用于我的场景。我有任意行作为输入（可能是任何可能的路径元素），在一般情况下计算“较短”行非常困难。
2. 我可以创建一个基本相同的黑色线条和较小尺寸的标记用作“孔”的蒙版。这样做的问题是，我基本上必须复制掩码中的所有线条，如果标记的形状比圆形更复杂，这也会变得相当复杂。

还有什么我可以尝试的吗？

<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="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>

Answer 1

最简单的做法是添加与背景颜色相同的填充。但是，如果您有图像或复杂的渐变背景，则可以进行绿屏替换。在 100% 红色（或绿色或蓝色 - 其他地方没有使用的）标记上使用填充，然后使用过滤器选择并删除它。

<svg width="200px" height="200px">
  <defs>
 <filter id="empty" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200">
   <feColorMatrix type="matrix" values="1 0 0 0 0 
                                        0 0 0 0 0 
                                        0 0 0 0 0 
                                        1 -255 -255 1 0"/>
    <feComposite operator="out" in="SourceGraphic"/>
 </filter>
    
  <marker id="line-start" markerWidth="14" markerHeight="14" refX="14" refY="7" markerUnits="userSpaceOnUse" >
      <circle stroke="#666" cx="7" cy="7" r="7" fill="red"/>
   </marker>
  </defs>

  

   <path filter="url(#empty)" stroke="#666" marker-start="url(#line-start)" marker-end="url(#line-start)" stroke-width="2" d="M50,100 L 180,100" />

</svg>