Question

我已经为14个不同的SVG对象编写了一个程序，并且我想为每个SVG对象编写一个单循环程序以获取其中心点。我更喜欢在Java代码中使用循环语句。

我曾经尝试使用JavaScript，但是并没有被反复循环。

JavaScript代码在这里；

doctype html
html(lang='en')
  head
    title Login
  body
    form(action='/', method='POST')
      label(for='email') Email: 
      input#email(type='text')


      button Login

我给每个SVG对象指定了唯一的ID（齿轮1，齿轮2，齿轮3，.....，齿轮14）。

最终结果必须是循环每个SVG对象的代码。

Answer 1

为此，我将使用querySelectorAll()。您可以选择ID以“ 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`);
});

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 = {};
      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>

循环使用SVG对象的Javascript

2 个答案: