svg - 在两个圆圈之间画一个箭头？

Question

如何在两个圆圈之间画一 strip 箭头的线，给定:

圆心的位置

圆的半径

我正在使用 线路和 标记 svg 对象。

如果我将箭头绘制到圆圈的“中心” - 那么箭头是不可见的。
如果我将箭头向后移动得太远 - 那么该线会显示并隐藏箭头的尖头(此处为了更好的可见性进行了夸大):


根据要求，这是我的代码的相关部分(在 livescript 中):

# 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)"

或者，这里是工作示例的 JSFiddle(请注意，箭头是“坐立不安”的，看起来恰到好处): http://jsfiddle.net/yeQS2/

Answer 1

如果我理解正确，您需要找到需要添加到源中的二维向量才能到达目标圆的边界。

伪代码:

d = distance between A and B; // (sqrt((xB-xA)² + (yB-yA)²)).
d2 = d - radius;

ratio = d2 / d;

dx = (xB - xA) * ratio;
dy = (yB - yA) * ratio;

x = xA + dx;
y = yA + dy;