Question

我正在使用svg借助Bezier二次路径在2个圆之间的末端绘制多个圆弧。这是我想要达到的最终效果。 http://www.apcjones.com/arrows/

我已经对如何在两个圆之间绘制几条圆弧（无箭头）有了一些想法。

但是当我尝试在2个圆之间绘制几条弧（末端带有箭头）时，发生了一些奇怪的事情。我在这里使用，并将refX设置为圆的“半径”以偏移圆内的线。但是我很快意识到，仅仅使用refX并不能解决问题，还应该调整标记的角度（我不知道如何）。

感谢您的帮助！

Answer 1

在这种情况下，您可能需要使用markers。

<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代码

使用svg

1 个答案: