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

Question

目前所有的圆圈（原子）都被放置在彼此之上。

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

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

这是我的工作 JS fiddle:

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

}

问题：有没有办法space创建的圆（原子）均匀，而不是彼此叠加？

Answer 1

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

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

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

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

JS - cant increment rotation attribute within loop?

javascript

svg

loops

increment

rotation