使用SVG动态绘制多个圆弧

Question

使用SVG动态绘制多个圆弧

3

我有一个SVG图像（下面是代码）：

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"

- peter.o

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Peter Collingridge · Accepted Answer

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坐标向左移动d个单位。我们可以使用勾股定理计算三角形的高度，其斜边为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" />

这有意义吗？