I'm trying to animation a svg star with glittering made in css.
The thing is the star moves toward 0,0 position of svg during the animation. I would like the star to stay in position during the animation.
What I'm guessing is that the position of each points that make the star (in path) are not used during the animation.
<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g>
<rect fill="#009eff" height="351.7699" width="300.36301" class="color-fill"/>
<path class="glittering" fill="#ffcc00" d="m270.88123,28.60792l-7.20074,6.20193l1.02679,9.44777l-8.12354,-4.93181l-8.66808,3.89605l2.18013,-9.24996l-6.38396,-7.03987l9.47093,-0.78498l4.72256,-8.24694l3.67325,8.76482l9.30264,1.94299z"/>
</g>
</svg>
I made a codepen so that you can see what I mean.
Can you help me community? Thanks a lot !
When you scale the star, you're effectively multiplying all the path coordinates by the scale factor. Since the path coordinates are all some distance from the origin, the star is moving about.
You need to define the star coordinates centered on the origin, and then use a <g> element with a suitable transform to park the star where you actually want it to be.
Assuming you plan to have more than one star in this picture, I would recommend defining the star shape in the <defs> section. This will make your SVG much easier to work with:
<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="star1" fill="#ffcc00" d="M0.000-10L2.939-4.05L9.511-3.09L4.755 1.55L5.878 8.09L0 5L-5.878 8.09L-4.755 1.55L-9.511 -3.09L-2.939-4.05L0-10Z"/>
</defs>
<g>
<rect fill="#009eff" height="100" width="300" class="color-fill"/>
<g transform="translate(200,30)">
<use xlink:href="#star1" class="glittering"/>
</g>
<g transform="translate(100,60)">
<use xlink:href="#star1" class="glittering"/>
</g>
</g>
</svg>