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

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>