Увеличить Некоторые детали SVG

Question

Я пытаюсь сделать ракету с огнем у основания, так что похоже, что огонь горит.

То, что я пытаюсь сделать, это увеличить высоту огня, а затем снова уменьшить его, чтобы я выглядел так, как будто он горит.

У меня есть изображение SVG и использование ключевых кадров для этого.

.fire{ 
    animation: fire_effect 1s infinite; 
}   
@keyframes fire_effect 
{ 
    0% {transform: scale(1,1);} 
    100% {transform:scale(1,1.5);} 
} 

Но он не получает увеличенного, infact он идет вниз. Пожалуйста, помогите мне, как я могу увеличить высоту огня.
У меня есть код-перо, здесь http://codepen.io/eugeneprateek/pen/WwqVaE

Answer 1

Просто используйте transform-origin: top; в этом случае.

Я пробовал внутри вашего пера, и он работает правильно, как вы хотите.

Answer 2

Вы не можете добавить эффект стиля на «г» тег, попытайтесь переместить назначение класса на два тегов «полигона» внутри «г» тег