如何在椭圆间绘制箭头？椭圆边缘定位及SVG实现方法

一、计算箭头指向椭圆B的边缘位置 #

已知椭圆A的中心坐标(x1, y1)，椭圆B的中心坐标(x2, y2)、水平半径rx、垂直半径ry，按以下步骤计算箭头终点：

• 计算从A中心指向B中心的方向向量：dx = x2 - x1，dy = y2 - y1
• 计算方向向量的长度：L = √(dx² + dy²)
• 根据椭圆的几何特性，箭头终点（椭圆B朝向A的边缘点）坐标为：

  targetX = x2 - (rx * dx) / L
  targetY = y2 - (ry * dy) / L
  

  公式中用减法是为了从B中心往A方向偏移到椭圆边缘，避免箭头进入椭圆内部。

代码示例（JavaScript） #

// 椭圆A参数
const ax = 100, ay = 100;
// 椭圆B参数
const bx = 300, by = 150, brx = 80, bry = 50;

// 计算方向向量与长度
const dx = bx - ax;
const dy = by - ay;
const length = Math.sqrt(dx * dx + dy * dy);

// 计算箭头终点
const targetX = bx - (brx * dx) / length;
const targetY = by - (bry * dy) / length;

// 后续可绘制从(ax, ay)到(targetX, targetY)的箭头

二、SVG中的简便实现方式 #

SVG本身没有直接连接两个椭圆的内置元素，但可以结合marker标记和几何计算快速实现：

1. 先定义箭头的标记样式；
2. 绘制两个椭圆；
3. 通过上述方法计算箭头的起点（若需要指向椭圆A边缘，同理用A的半径计算）和终点，用<line>元素绘制并绑定箭头标记。

SVG示例代码 #

<svg width="500" height="300">
  <!-- 定义箭头标记 -->
  <defs>
    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
      <polygon points="0 0, 10 3.5, 0 7" fill="black" />
    </marker>
  </defs>
  
  <!-- 绘制椭圆A和B -->
  <ellipse cx="100" cy="100" rx="50" ry="30" fill="#eee" stroke="black" />
  <ellipse cx="300" cy="150" rx="80" ry="50" fill="#eee" stroke="black" />
  
  <!-- 绘制箭头（坐标为计算后的结果） -->
  <line x1="100" y1="100" x2="263.2" y2="130.9" stroke="black" marker-end="url(#arrowhead)" />
</svg>

如果需要动态生成箭头，可以用JavaScript在SVG中计算端点后，动态创建或修改<line>元素的坐标属性。

内容的提问来源于stack exchange，提问作者at.