Нарисуйте стрелки между двумя кругами, используя SVG

Question

Я использую svg, чтобы нарисовать несколько дуг с дугами на конце между двумя кругами с помощью квадратичной траектории Безье.Вот конечный эффект, которого я хочу достичь.http://www.apcjones.com/arrows/

У меня уже была идея о том, как нарисовать несколько дуг (без стрелок) между двумя кружками.

Но когда я попытался нарисовать несколько дуг (со стрелками на конце) между2 круга, произошло нечто странное.Я использую здесь, и я устанавливаю refX на «радиус» круга, чтобы сместить линию внутри круга.Но вскоре я понял, что простое использование refX не решает проблему, угол маркера также должен быть отрегулирован (я не знаю как).

текущий эффект

Спасибо за помощь!

Answer 1

В этом случае вам может понадобиться использовать маркеры .

<svg width="200" height="100" viewBox="0 0 200 100">
  <defs>
    <desc>Define the marker</desc>
    <marker id="arrow" refX="4" refY="3" markerWidth="6" markerHeight="6" orient="auto" stroke="black">
      <path d="M 0 0 L 4 3 L 0 6 Z"></path>
    </marker>
  </defs>
  <desc>Use the markers</desc>
  <circle cx="160" cy="50" r="20" />
  <circle cx="50" cy="50" r="20" />
  
  <line x1="70" y1="50" x2="140" y2="50" fill="none" stroke="black" stroke-width="2" marker-end="url(#arrow)"></line>

</svg>

Если вам нужна дополнительная помощь, отредактируйте вопрос и добавьте свой SVG-код