使用SVG在两个圆圈之间绘制箭头

Question

我正在使用svg借助Bezier二次路径在2个圆之间的末端绘制多个圆弧。 这是我想要达到的最终效果。 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代码