title: Draw an arrow between two circles?
body: <p>How can I draw an arrowed line between two circles, given: </p>
  
  <ol>
  <li>Location of the centers of the cirlces</li>
  <li>Radius of the circles</li>
  </ol>
  
  <p>I am using <strong>line</strong> and <strong>marker</strong> svg objects.</p>
  
  <p>If I draw the arrows to the "center" of the circle - then the arrow is invisible.
  If I move the arrow too far back - then the line shows through and hides the pointy end of the arrow (here exaggerated for better visibility):
  <img src="https://i.stack.imgur.com/TbciX.jpg" alt="Arrows moved waaaay back"></p>
  
  <p>As per request, here is the relevant bits of my code (in livescript):</p>
  
  <pre><code># Draw an arrow to use for lines
  svg.append("svg:defs")
   .append("svg:marker")
    .attr("id", "arrow")
    .attr("viewBox", "0 0 10 10")
    .attr("refX", 27)
    .attr("refY", 5)
    .attr("markerUnits", "strokeWidth")
    .attr("markerWidth", 8)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
    .append("svg:path")
    .attr("d", "M 0 0 L 10 5 L 0 10 z")
  
  svg.append("line")
   .attr "x1" 5 
   .attr "x2" 50 
   .attr "y1" 5 
   .attr "y2" 50
   .style "stroke" "black"
   .attr "stroke-width" 2
   .attr "marker-end" "url(\#arrow)"
  </code></pre>
  
  <p>Alternatively, here is JSFiddle of the working example (note that the arrows are "fidgeted" to look just right): <a href="http://jsfiddle.net/yeQS2/" rel="noreferrer">http://jsfiddle.net/yeQS2/</a></p>