1

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>

私の言いたいことがわかるようにコードペンを作りました。

コードペン

コミュニティを手伝ってくれませんか?どうもありがとう !

4

1 に答える 1