In blazor how can I do a for loop with svg objects?-CodePudding

As an example, on Blazor, I'm trying to do a loop to rotate a rectangle like a hand of a watch. The basic test example is like this:

 <svg width="400" height="110">
    @for (int i = 1; i < 13; i  )
    {
        <rect id="rect @i" width="30" height="60" style="fill:red;stroke-width:3;stroke:rgb(0,0,0)" transform="rotate(@i*30)" />
    }
    <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" transform="rotate(360)" />
</svg>

CodePudding user response：

Whilst you specified the size of the rectangle you did not give it a position.

<svg width="110" height="110" viewBox="-110 -110 220 220">
    @for (int i = 0; i < 12; i  )
    {
        <rect id="rect @i" x="-15" y="50" width="30" height="60" transform="rotate(@(i*30) 0 0)" />
    }
</svg>