SVG変換スケールが適用されていません

Question

htmlにインラインsvgが含まれています。私の目標は、個々の星を特定し、キーフレームとして「びっくり」効果を適用することです。 私は、変換プロパティのインラインスタイル属性があることに気付きました。

単純なスケーリング効果をテストするために、#starをtransform-origin: 50% 50%に変更し、transform: scale(1.2)を追加しました。

何らかの理由で、#star要素の上にカーソルを置いてもトランスフォームが適用されません。ホバー上で星が消えます。

相続人はリンクに私のcodepen

Answer 1

transform:scale()#star:hover polygonに、これはグループ内のポリゴンのサイズを変更する必要があります適用します。

#star:hover polygon{ 
transform: scale(1.2) 
} 

CODEPEN