JS - 不能在循环内增加旋转属性？

如何解决JS - 不能在循环内增加旋转属性？

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

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

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

这是我正在使用的 JS 小提琴：

https://jsfiddle.net/hab_1/qj9rwdmf/5/

  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); 
}

}

问题：有没有办法让创建的圆（原子）均匀分布，而不是放在彼此的顶部？

解决方法

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

rings =[2,8,18,32,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)');
      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,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,30,"orbit1")
    } else if (ring <= 8 && ring > 2 ) {
        mainRing(120,50)
        mainAtom(120,50,"orbit2")
    }   else if (ring <= 18 && ring > 8) {
        mainRing(120,70)
        mainAtom(120,70,"orbit3")

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

https://jsfiddle.net/2uq14gx9/36/