使用SVG动态绘制多个圆弧 [英] Drawing multiple circular arcs dynamically using SVG

问题描述

我有SVG图片(下面的代码):

I've got SVG image (code below):

<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 属性)，

I cannot see any pattern while drawing curved lines that are separated by the same margin (I've made the image above just by "guessing"). The number of lines is dynamic so I need a formula to count every M L A parameter. E.g. I can take inner line as static (showing just the d attribute),

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

，但是应该以某种方式计算出第一外层，以获得 d :

but then first outer should be calculated somehow, to get d:

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

推荐答案

用A rx ry rotation large-arc-flag sweep-flag x y绘制SVG弧 这里的关键参数是rx和ry:圆弧的半径以及x和y是圆弧的终点.

SVG arcs are drawn with A rx ry rotation large-arc-flag sweep-flag x y The key parameters here are rx and ry: the radii of the arc and x and y which are the final point in the arc.

例如，如果您有一个半径为r的以(cx，cy)为中心的圆，则可以使用以下方法从圆的边缘创建d个单位并围绕该圆弧:

For example, if you have a circle centred on (cx, cy) with radius r, you can create and arc around it, d units from the edge of the circle with:

<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)，该弧线将位于右下象限.

This arc will be in the lower, right quadrant because of where it starts (cx, cy+r+d) and ends (cx+r+d, cy).

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

So call the radius of the inner arc r and the radius of the outer arc r + d. Now we need to know where to start and stop the arc. The x-coordinate of the start and stop points is d units to the left of the cx. We can find the y-coordinate by using Pythagoras's theorem to calculate the height of the triangle with a hypotenuse of r+d and a base of 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

For example, with (cx, cy) = (100, 150), r = 50, and 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" />

这有意义吗?

这篇关于使用SVG动态绘制多个圆弧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！