使用SVG动态绘制多个圆弧

Question

我有SVG图片（下面的代码）：

<svg height="500" width="500">
<!-- Inner line -->
<path d="M100,50 L 100,100 A 45,45 0 1,0 150,150 L 200 150" style="stroke:#000; stroke-width:6; fill:none;" />
<!-- Outer line -->
<path d="M 90,50 L 90,92.5 A 54.5,54.5 0 0,0 90,197.5 L 90, 240.5" style="stroke:#000; stroke-width:1; fill:none;" />
<circle cx="105" cy="145" r="35" stroke="black" stroke-width="1" fill="green" />

在绘制由相同边距分隔的曲线时，我看不到任何图案（我只是通过“猜测”使上面的图像）。行数是动态的，因此我需要一个公式来计算每个M L A参数。例如。我可以将内线视为静态（仅显示 d 属性），

d="M100,50 L 100,100 A 45,45 0 1,0 150,150 L 200 150"

然后应该以某种方式计算第一个外部，以获得 d ：

d="M 90,50 L 90,92.5 A 54.5,54.5 0 0,0 90,197.5 L 90, 240.5"

Answer 1

使用A rx ry rotation large-arc-flag sweep-flag x y绘制SVG弧 这里的关键参数是rx和ry：弧的半径，x和y是弧中的最后一点。

例如，如果你有一个以（cx，cy）为中心的半径为r的圆，你可以创建并绕过它，从圆的边缘开始d个单位：

<path d="M cx cy+r+d A r+d r+d 0 0 0 cx+r+d cy" />

这个弧将位于右下象限，因为它从哪里开始（cx，cy + r + d）和结束（cx + r + d，cy）。

因此，调用内弧r的半径和外弧r + d的半径。现在我们需要知道从哪里开始和停止弧。起点和终点的x坐标是cx左侧的d个单位。我们可以通过使用毕达哥拉斯定理来计算y坐标来计算三角形的高度，其斜边为r + d，基数为d： h = sqrt((r + d)^2 - d^2)。

弧的代码因此是：

d="M cx-d, 50 L cx-d, cy-h A r+d r+d 0 0 0 cx-d, cy+h L cx-d, 240"

例如，（cx，cy）=（100,150），r = 50，d = 10

<path d="M100,50 L 100,100 A 50,50 0 1,0 150,150 L 200 150" style="stroke:#000; stroke-width:6; fill:none;" />
<path d="M 90,50 L 90,90.8 A 60,60 0 0,0 90,209.1 L 90, 240.5" style="stroke:#000; stroke-width:1; fill:none;" />
<circle cx="100" cy="150" r="40" stroke="black" stroke-width="1" fill="green" />

这有意义吗？