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>