title: SVG Path - render only a percent of the specified path
body: <p>NOTE: I have a feeling that the answers to this question will rely on the dashed stroke trick often used to answer questions about animating svg path  ( e.g. <a href="https://stackoverflow.com/questions/33024526/animate-svg-path">Animate svg path</a>, and the countless other similar questions). If possible, I am looking for an answer that does not rely on dashed lines. </p>
  
  <p>Suppose you have an SVG with a path between some number of objects. You know where the objects are centered and their width. In principal you could calculate a path that only goes from the the edges of each object. However, this can be tedious. So how can you specify a path form object 1 to object 2, but offset the drawn part so it is only shown from the edges?</p>
  
  <p>In the code below, the first path between two points uses their center. 
  This is how I want to specify my path. The second path is how I would like the path to be rendered. e.g. I am looking for some attribute like <code>offset-from-start=10</code> and <code>offset-from-end=10</code> to do this. If the path is compound or if the object has an irregular shape, calculating the angle of the shorter path is tedious (but straightforward). In addition, using a shorter path, changes curves, where hopefully this offset does not.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg style="width:200px;height:200px"&gt;
    &lt;circle r="10" cx="10" cy="10" fill="red"&gt;&lt;/circle&gt;
    &lt;circle r="10" cx="190" cy="10" fill="red" style="opacity:0.5"&gt;&lt;/circle&gt;
    &lt;path d="M10 10 L 190 10" stroke-width="4" stroke="black"&gt;&lt;/path&gt;
  
  
    &lt;circle r="10" cx="10" cy="50" fill="red"&gt;&lt;/circle&gt;
    &lt;circle r="10" cx="190" cy="50" fill="red" style="opacity:0.5"&gt;&lt;/circle&gt;
    &lt;path d="M20 50 L 180 50" stroke-width="4" stroke="black"&gt;&lt;/path&gt;
  
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>