Цикл в Javascript для объектов SVG

Question

Я написал программу для 14 номеров различных объектов SVG. И я хочу написать программу с одним циклом для каждого объекта SVG, чтобы получить его точку в центре. Я предпочел использовать оператор цикла в моем коде с JavaScript

Я пытался использовать JavaScript, но он не повторяется многократно.

Код JavaScript идет сюда;

    var i=1;
    while(i<15){
      gear = document.getElementById("gear"+i);
      let aa = gear.getBBox()
      let a = {};
      a.x = aa.x + aa.width/2;
      a.y = aa.y + aa.height/2;
      gear.setAttribute("style",`transform-origin:${a.x}px ${a.y}px` );
      i++;
    }

Я дал уникальный идентификатор для каждого объекта SVG как (gear1, gear2, gear3, ....., gear14).

Окончательным результатом должно быть зацикливание кода для каждого и каждого объекта SVG.

Answer 1

 var i=1;
let gear =[]
    while(i<3){
      gear[i] = document.getElementById("gear"+i);
    //  alert(gear[i])
      let aa = gear[i].getBBox();
      let a = {};
      a.x = aa.x + aa.width/2;
      a.y = aa.y + aa.height/2;
      gear[i].setAttribute("style",`transform-origin:${a.x}px ${a.y}px` );
      i++;
    }

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> 
    <g id="gear1"> 
        <text x="5" y="16" transform="scale(2, 2)">Hello World!</text> 
        <text x="8" y="32" transform="translate(0 20) scale(1.25 1)">Hello World Again!</text> 
    </g> 
    <g id="gear2"> 
        <text x="5" y="16" transform="scale(5, 8)">Hello World2!</text> 
        <text x="8" y="32" transform="translate(0 20) scale(1.25 1)">Hello World Again!</text> 
    </g> 
    <g id="gear3"> 
        <text x="5" y="16" transform="scale(3, 5)">Hello World3!</text> 
        <text x="8" y="32" transform="translate(0 20) scale(1.25 1)">Hello World Again!</text> 
    </g> 
  
</svg>

Answer 2

Я бы использовал querySelectorAll() для этого.Вы можете выбрать все передачи, которые начинаются с «gear».И я бы не использовал a или aa в качестве имени переменной.Это просто сбивает с толку.

let gears = document.querySelectorAll("[id^='gear']"); // get all gears

// Now convert "gears" into an array and loop it
Array.from(gears).forEach(function(gear){
    let bbox = gear.getBBox();
    let styles = {};
    styles.x = bbox.x + bbox.width / 2;
    styles.y = bbox.y + bbox.height / 2;

    gear.setAttribute("style", `transform-origin:${styles.x}px ${styles.y}px`);
});