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

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>

标签： javascriptsvg

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>