按像素缩短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 像素（或几度，如果更简单的话）：

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

最后我会用D3来做这件事，所以我需要一个算法。

Answer 1

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

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

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