Html 放大SVG的某些部分

我正试图让火箭在基地着火，这样看起来就像火在燃烧

我想做的是扩大火的高度，然后再降低它，让我看起来像是在燃烧

我有SVG图像，并使用关键帧来做这件事

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

但它并没有变大，事实上它是在向下。请帮助我了解如何增加火的高度。
我这里有一支密码笔

---

您无法在“g”标记上添加样式效果，请尝试在“g”标记内的两个“多边形”标记上移动类赋值

您无法在“g”标记上添加样式效果，请尝试在“g”标记内的两个“多边形”标记上移动类赋值

只需使用

变换原点：top在这种情况下

我在你的钢笔里试过，它可以正常工作。
只需使用
变换原点：top在这种情况下

我在你的钢笔里试过，它可以正常工作。
我已经有了一个名为fire的类。你能给我看一个小的演示/例子吗？谢谢你更新你的评论，我正在尝试你的建议。我对你在css中的效果做了一点修改，现在它可以工作了：@AndreaValentini它看起来很难看，没有伸展性。我已经有一个名为fire的类了。你能给我看一个小的演示/例子吗？谢谢你更新你的评论，我正在尝试你的建议。我对你在css中的效果做了一点改变，现在它可以工作了：@AndreaValentini它看起来很难看，不能垂直伸展。它在FireFox中不起作用，它只在Chrome中起作用。我尝试添加了-webkit和-moz@Eugene它通过svg元素工作，不幸的是，我认为，它只能用JSF来修复。你最终可以为FF添加转换源代码，并为webkit/opera添加前缀：也就是说，不做任何事情，所以不用担心，我猜它在我的firefox中可以正常工作，否则我就不会发布任何东西了：）（W7 FF 44.01）测试代码笔，反馈给我；）在我的FF 48中进行了测试，但它不起作用，可能他们在较新版本中更改了transform box，但上面链接中的错误已确认，但仍未解决：（它在FireFox中不起作用，它只在我尝试添加的Chrome中起作用-webkit和-moz@Eugene它可以通过，但对于svg元素，不幸的是，我认为，它只能通过JSF修复。最终，您可以为FF添加转换源，并为webkit/opera添加前缀：即，不做任何事情，所以不用担心，我猜它在我的firefox，否则我不会发布任何东西：）（W7 FF 44.01）测试代码笔，反馈给我；）在我的FF 48中测试，但它不起作用，可能他们在新版本中更改了transform box，但上面链接中的错误已确认，仍然没有解决：(