Shorten SVG path arc by pixel - d3.js

Question

I have a path with an arc that points to a circle:
<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>
Now I want that the path ends e.g. 20 pixel (or a few degree, if simpler) before the border of the circle:
How can I archive this? How can I calculate the differing X and Y as target for the arc drawing (in my example the 200,100 in the d argument)?
In the end I will do this with D3, so I need an algorithm.

Answer 1

This could easily be done by applying a variation of the stroke-dasharray trick. You can obtain the total length of the path by calling .getTotalLength(), subtract the length you want the path to end before this calculated length, and set the stroke-dasharray attribute accordingly:
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>

Answer 2

If you want to do this via a geometric algorithm, you will have to first compute the arc's properties such as center (cx, cy), start angle, sweeping angle,...etc from the current available data: radius = 120, start point (10, 10), end point (200, 100) and the two flags (large arc flag and sweep flag). Please refer to section F6.5 in this link for details. Once you have these information, you can compute the new end point easily.