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

SVG 弧线使用A rx ry rotation large-arc-flag sweep-flag x y 绘制 这里的关键参数是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 个单位。我们可以通过使用毕达哥拉斯定理来计算斜边为 r+d、底为 d 的三角形的高度来找到 y 坐标： 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" />

这有意义吗？