如何开始和结束打圆圈的路径

Question

我要停止并开始在圆外的路径。我可以想象有很多方法可以得到我想要的结果：

• 我可以在圆圈中添加白色背景以隐藏路径
• 我可以计算路径离开圆的位置并将其用作起点

但是这两种解决方案都有问题（当使用另一种背景而不是一种颜色时难度更大（1），或者在进行“惰性”数学运算时起点和终点稍微错误（2））

我也可以想象SVG解决方案，但是我不知道如何在Google上搜索它们，因此我问你：

• 通过特定像素（圆半径）更早地开始和结束路径
• 使用SVG蒙版剪切路径（请注意，我的圈子是透明的或没有填充）

svg
{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: 100;
}
circle
{
    position: absolute;
    stroke: black;
    fill: transparent;
    stroke-width: 2;
    cursor: pointer;
}
path
{
    fill:none;
    stroke-width:2;
    stroke:black;
}

<svg>
<circle 
  r="40" 
  cx="187.33333333333331" 
  cy="149"
></circle>
<circle 
  r="40" 
  cx="374.66666666666663" 
  cy="149"
></circle>
<path 
  d="
    M 187.33333333333331 149 
    Q 281 92.80000000000001 374.66666666666663 149
  "
></path>
</svg>

Answer 1

您可以使用破折号隐藏线的第一部分和最后部分-由于线是弯曲的，因此并不完全精确。

var path = document.getElementById("path")
var l = path.getTotalLength()
var r = 40
path.setAttribute("stroke-dasharray","0,"+r+","+(l-2*r)+","+r)

svg
{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: 100;
}
circle
{
    position: absolute;
    stroke: black;
    fill: transparent;
    stroke-width: 2;
    cursor: pointer;
}
path
{
    fill:none;
    stroke-width:2;
    stroke:black;
}

<svg><circle r="40" cx="187.33333333333331" cy="149"></circle><circle r="40" cx="374.66666666666663" cy="149"></circle><path id=path d="M 187.33333333333331 149 Q 281 92.80000000000001 374.66666666666663 149"></path></svg>