在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對象賦予了唯一的id（gear1，gear2，gear3，.....，gear14）。

最終結果必須是為每個SVG對象循環代碼。

Answer 1

我會使用querySelectorAll() 。 您可以選擇所有以“齒輪”開頭的齒輪。 我不會使用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`);
});

Answer 2

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