逐个像素地缩短SVG路径

Question

我有一条弧线指向圆圈的路径：

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
<path d="M10,10  A120,120 0 0,0 200,100" stroke="green" stroke-width="5" fill="none" />
<circle cx="200" cy="100" r="10" stroke="black" stroke-width="5" fill="none" />
</svg>

现在我希望路径结束，例如在圆的边界之前20像素（或几度，如果更简单）：

viewportEvent()

我如何存档？如何计算不同的X和Y作为圆弧绘图的目标（在我的示例中为200,100参数中的d）？

最后我将使用执行此操作，因此我需要一种算法。

Answer 1

这可以通过应用stroke-dasharray trick的变体轻松完成。您可以通过调用.getTotalLength()获取路径的总长度，减去希望路径在此计算长度之前结束的长度，并相应地设置stroke-dasharray属性：

＆＃13;

＆＃13;

var path = d3.select("path")
  .attr("stroke-dasharray", function() { 
    return this.getTotalLength() - 20;
  });

＆＃13;

<script src="https://d3js.org/d3.v4.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
<path d="M10,10  A120,120 0 0,0 200,100" stroke="green" stroke-width="5" fill="none" stroke-dasharray="100"/>
<circle cx="200" cy="100" r="10" stroke="black" stroke-width="5" fill="none" />
</svg>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果你想通过几何算法做到这一点，你必须首先从当前可用的算法计算弧的属性，如中心（cx，cy），起始角度，扫掠角度等等。 data：radius = 120，起点（10,10），终点（200,100）和两个标志（大弧标志和扫描标志）。有关详细信息，请参阅此link中的F6.5部分。获得这些信息后，您可以轻松计算新的终点。