按像素缩短 SVG 路径弧答案

【问题标题】：Shorten SVG path arc by pixel按像素缩短 SVG 路径弧
【发布时间】：2017-03-02 02:50:16
【问题描述】：

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

<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 作为圆弧绘图的目标（在我的示例中，d 参数中的 200,100）？

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

【问题讨论】：

标签： d3.js svg geometry 2d calc

【解决方案1】：

这可以通过应用stroke-dasharray trick 的变体轻松完成。您可以通过调用.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>

【讨论】：

【解决方案2】：

如果您想通过几何算法执行此操作，您必须首先根据当前可用数据计算圆弧的属性，例如中心 (cx, cy)、起始角度、扫掠角度...等：半径 = 120、起点（10、10）、终点（200、100）和两个标志（大弧标志和扫标志）。详情请参阅link 中的 F6.5 部分。获得这些信息后，您可以轻松计算新的终点。

【讨论】：