SVG 弧线是用A rx ry rotation large-arc-flag sweep-flag x y
这里的关键参数是rx
and ry
:圆弧的半径和x
and 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" />
那有意义吗?