title: Shorten SVG path arc by pixel
body: <p>I have a path with an arc that points to a circle:</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" width="300" height="200"&gt;
  &lt;path d="M10,10  A120,120 0 0,0 200,100" stroke="green" stroke-width="5" fill="none" /&gt;
  &lt;circle cx="200" cy="100" r="10" stroke="black" stroke-width="5" fill="none" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Now I want that the path ends e.g. 20 pixel (or a few degree, if simpler) before the border of the circle:</p>
  
  <p><a href="https://i.stack.imgur.com/viL63.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/viL63.png" alt="rendered SVG with arrow with note &quot;Line should end here&quot;"></a></p>
  
  <p>How can I archive this? How can I calculate the differing X and Y as target for the arc drawing (in my example the <code>200,100</code> in the <code>d</code> argument)?</p>
  
  <p>In the end I will do this with <a href="https://d3js.org/" rel="nofollow noreferrer">D3</a>, so I need an algorithm.</p>