Put arrow head on path where intersects with a circle

Question

I have a path that ends at the center of a circle. I want to place an arrow head on the path pointing toward the circle. I want the point of the arrow head to be at the point of intersection between the path and the circle. How can I achieve this?

I know the radius of the circle. The path is a quadratic curve between two points from this accepted answer: Create svg arcs between two points

[This](http://www.kevlindev.com/gui/math/intersection/index.htm) might be a helpfull library. — ccprog, Feb 20 '18 at 00:30

score 0 · Answer 1 · answered Feb 20 '18 at 08:45

You just need to calculate the coordinates of a suitable point on the circumference of the circle.

I've simplified here and just moved the start and end points in (on the X axis) by the circle radius. If you want it to start and end at a different point on the circle(s), then you'll need to invoke a little simple geometry. But this example should at least give you a head start.

The arrowhead marker I've used is configured to point at the end point of the line (as opposed to starting at the end of it).

function arc_links(dwg,x1,y1,x2,y2,k) {
  var cx = (x1+x2)/2;
  var cy = (y1+y2)/2;
  var dx = (x2-x1)/2;
  var dy = (y2-y1)/2;
  dd = Math.sqrt(dx*dx+dy*dy);
  ex = cx + dy/dd * k;
  ey = cy - dx/dd * k;
  var path = dwg.path("M"+x1+" "+y1+"Q"+ex+" "+ey+" "+x2+" "+y2).stroke({width:1}).fill('none')
                .marker('end', SVG.select('#arrowhead').first());
}

function create_svg() {
  var draw = SVG.select('#drawing').first();

  draw.circle(50).move(25,25).fill('#fff').stroke({width:1});
  draw.circle(50).move(225,25).fill('#fff').stroke({width:1});
  arc_links(draw,75,50,225,50,40);
}

create_svg();

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.3.2/svg.min.js"></script>
<svg id="drawing" width="300" height="300">
  <defs>
    <marker id="arrowhead" markerUnits="userSpaceOnUse" markerWidth="10" markerHeight="10"
            refX="10" refY="0" viewBox="0 -5 10 10" orient="auto">
      <path d="M0 -5L10 0L0 5 Z"></path>
    </marker>
  </defs>
</svg>

OP was asking for "a path that ends at the center of a circle". That is not what you are doing here, isn't it? — ccprog, Feb 20 '18 at 13:01
@ccprog I think you misread maybe? "I want the point of the arrow head to be at the point of intersection between the path and the circle" — Paul LeBeau, Feb 21 '18 at 08:52

Put arrow head on path where intersects with a circle

1 Answers1