i am trying to make this star-pendulum i made in inkscape rotate on its most top axis. i was able to make it go back and forth indefinitely but i wasn't able to set the transform-origin to the top of the thread/pendulum eventhough i have included
transform-origin: top;
on both the rectangular thread and the whole pendulum
instead of rotating on its top axis like a normal pendulum would, it rotates around the top center of the screen window.
i tried putting the transform-origin: top; on many different places non of them bear any fruit
here is the code
#rect1006 {
transform-origin: top;
}
#star-pendulum {
transform-origin: top;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes example {
0%,
100% {
transform: rotate(45deg);
}
50% {
transform: rotate(-45deg);
}
}<svg width="100hw" height="100vh" viewBox="0 0 1366.0 768.0" version="1.1" id="SVGRoot" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs846" />
<g
id="layer1">
<rect
style="fill:#00ffff;fill-opacity:0.517647;stroke:#000000;stroke-width:4.73953"
id="rect958"
width="1366.4519"
height="777.12903"
x="6.4760752"
y="-4.3173833" />
<rect
style="fill:none;fill-opacity:0;stroke:none;stroke-width:4.73953"
id="rect1004"
width="196.44095"
height="490.02301"
x="192.12357"
y="127.36281" />
<g
id="star-pendulum">
<rect
style="fill:#ff0068;fill-opacity:1;stroke:#000000;stroke-width:4.73953"
id="rect1006"
width="45.332527"
height="364.81891"
x="267.67776"
y="127.36281" />
<path
style="fill:#000080;fill-opacity:1;stroke:#000000;stroke-width:4.73953"
id="path1030"
d="m 316.93328,537.77997 -38.57892,-24.62231 -42.15425,17.82164 11.49566,-44.29945 -29.97576,-34.58389 45.68364,-2.75625 23.6282,-39.19565 16.73838,42.59598 44.5788,10.35964 -35.33875,29.08203 z" />
</g>
</g>
</svg>any help is appreciated
