cssで作ったきらびやかなsvgスターをアニメーション化しようとしています。
問題は、アニメーション中に星が svg の 0,0 の位置に向かって移動することです。アニメーション中、星の位置を維持したいと思います。
私が推測しているのは、星を(パス内に)作る各ポイントの位置がアニメーション中に使用されていないことです。
<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>
私の言いたいことがわかるようにコードペンを作りました。
コミュニティを手伝ってくれませんか?どうもありがとう !