使用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代碼