以编程方式在圆形路径中创建 SVG 圆圈，以保持与对象的均匀距离

Question

我想创建一个 JavaScript 函数，它将动态生成 SVG 图像，如下所示：

图片代表一张有很多座位和标签的桌子。我用来生成这个表的代码如下：

<g id="svg_23">
     <ellipse sid="0" ry="34"  rx="34"  id="svg_13" cy="73"   cx="228" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="1" ry="7.5" rx="7.5" id="svg_17" cy="26"   cx="228" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="2" ry="7.5" rx="7.5" id="svg_19" cy="37"   cx="260" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="3" ry="7.5" rx="7.5" id="svg_16" cy="72"   cx="275" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="4" ry="7.5" rx="7.5" id="svg_18" cy="106"  cx="260" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="5" ry="7.5" rx="7.5" id="svg_14" cy="120"  cx="228" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="6" ry="7.5" rx="7.5" id="svg_21" cy="107"  cx="194" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="7 "stroke="#000" ry="7.5" rx="7.5" id="svg_15" cy="73" cx="181" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" fill="#fff"/>
     <ellipse sid="8" ry="7.5" rx="7.5" id="svg_20" cy="40" cx="194" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <text xmlSpace="preserve" textAnchor="start" fontFamily="Helvetica, Arial, sans-serif" fontSize="24" id="svg_22" y="80.5" x="219.5" fillOpacity="null" strokeOpacity="null" strokeWidth="0" stroke="#000" fill="#000000">B</text>
    </g>

我希望能够在 Javascript 函数中生成它，该函数将接收图像的 Y 和 X 坐标以及一些座位。例如，从 2 到 10 个座位。

该函数将返回均匀分布在桌子周围的座位。我最初的想法是计算座位将放置的外圆的周长，然后除以座位数。这里的问题是如何计算每个座位的 X 和 Y 位置。

有什么想法吗？

Answer 1

计算圆的角度（360/number_of_circles*index）后，您只需将其偏移角度和距离

“这是计算公式。

X=距离*cos(角度)

Y=距离*sin(角度)

但这是与原点 (0,0) 的角度和距离，通常您希望位置 (x,y) 与另一个位置 (x0, y0) 的角度和距离。

X=距离*cos(角度) +x0

Y=距离*sin(角度) +y0 "

(复制粘贴从 https://www.construct.net/pl/forum/construct-2/how-do-i-18/how-do-i-calculate-position-x-78314 - 非常基本的三角数学；））

一个注意事项 - 角度是弧度，而不是度数，所以

var toRadians = function (degree) {
    return degree * (Math.PI / 180);
};