Javascript JS-循环内铁路超高增量旋转属性？

目前所有的圆（原子）都被放置在彼此的顶部。

我正在尝试增加一个特定属性，以便圆（原子）从彼此的另一侧开始。在我的小提琴中，我正在创建SVG，并试图在每个循环中设置不同的旋转

尝试： 尝试使用++和+=递增，尽管我似乎无法通过编程在每个原子之间添加等量的间隔。还尝试添加可添加到旋转属性的所需值数组，但最终这些值将发生变化，因为原子数量将发生变化

这是我的工作小提琴：

  let mainAtom = function(xPos, yPos, name){
for(i = 0; i < ring; i++){
    var mainAtom = document.createElementNS('http://www.w3.org/2000/svg','circle');
    mainAtom.setAttribute('cx', xPos);
    mainAtom.setAttribute('cy', yPos);             
    mainAtom.setAttribute('r', '5');
    mainAtom.setAttribute('fill', atomFillColor);
    mainAtom.setAttribute('stroke', atomStrokeColor);
    mainAtom.setAttribute('stroke-width', '3');
    mainAtom.setAttribute('z-index', '2');
    // mainAtom.setAttribute('rotate', '36');
  /*   const name = [" one", " two", " three"]   */
    mainAtom.setAttribute('class', 'atom' + " " + name + " " + i) 
  var svg = document.getElementById('svgx'); 
    svg.appendChild(mainAtom); 
}

let mainAtom=function（xPos、yPos、name）{
对于（i=0；i

}

---

问题：有没有办法将创建的圆（原子）均匀地隔开，而不是相互重叠？

如果我正确理解了您的问题，您需要使用三角函数为每个原子指定正确的坐标（而不是尝试旋转它）。这应该给你一个想法：

rings =[2, 8, 18, 32, 32, 18, 8]

rings.forEach(ring => {

  let mainRingStrokeColor = "orange"
  let mainRing = function(xPos, yPos, r) { 
    let mainRing = document.createElementNS('http://www.w3.org/2000/svg','circle');
      mainRing.setAttribute('cx', xPos);
      mainRing.setAttribute('cy', yPos);  
      mainRing.setAttribute('r', r);
      mainRing.setAttribute('fill', 'rgba(0,0,0,0)');
      mainRing.setAttribute('stroke', mainRingStrokeColor);
      mainRing.setAttribute('stroke-width', '3');
    let svg = document.getElementById('svgx');
        svg.appendChild(mainRing); }
      
  let atomFillColor = "white"
  let atomStrokeColor = "orange"
  
  let mainAtom = function(xPos, yPos, r, name){
    for(i = 0; i < ring; i++){
        var mainAtom = document.createElementNS('http://www.w3.org/2000/svg','circle');
        mainAtom.setAttribute('cx', xPos + r * Math.cos((2 * Math.PI * i)/ring));
        mainAtom.setAttribute('cy', yPos + r * Math.sin((2 * Math.PI * i)/ring));
        //mainAtom.setAttribute('cx', xPos);
        //mainAtom.setAttribute('cy', yPos);
        mainAtom.setAttribute('r', '5');
        mainAtom.setAttribute('fill', atomFillColor);
        mainAtom.setAttribute('stroke', atomStrokeColor);
        mainAtom.setAttribute('stroke-width', '3');
        mainAtom.setAttribute('z-index', '2');
        //mainAtom.setAttribute('rotate', '180deg');
      /*   const name = [" one", " two", " three"]   */
        mainAtom.setAttribute('class', 'atom' + " " + name + " " + i) 
      var svg = document.getElementById('svgx'); 
        svg.appendChild(mainAtom); 
    }
  } 
  
    //create atoms and rings
    if(ring <= 2){
        mainRing(120, 120, 30) 
        mainAtom(120, 120, 30, "orbit1")
    } else if (ring <= 8 && ring > 2 ) {
        mainRing(120, 120, 50)
        mainAtom(120, 120, 50, "orbit2")
    }   else if (ring <= 18 && ring > 8) {
        mainRing(120, 120, 70)
        mainAtom(120, 120, 70, "orbit3")

        mainRing(120, 120, 90)
        mainAtom(120, 120, 90, "orbit4")
    }
  
})

rings=[2,8,18,32,32,18,8]
rings.forEach（ring=>{
让mainRingStrokeColor=“橙色”
设mainRing=function（xPos，yPos，r）{
让mainRing=document.createElements（'http://www.w3.org/2000/svg","圈",；
mainRing.setAttribute（'cx'，xPos）；
mairing.setAttribute（'cy'，yPos）；
mairing.setAttribute（'r'，r）；
setAttribute（'fill'，'rgba（0,0,0,0'）；
setAttribute（'stroke'，mainRingStrokeColor）；
setAttribute（'stroke-width'，'3'）；
让svg=document.getElementById（'svgx'）；
svg.appendChild（mairing）；}
让atomFillColor=“白色”
让atomStrokeColor=“橙色”
让mainAtom=function（xPos、yPos、r、name）{
对于（i=0；i