Изменение размера группы путей в файле SVG

Question

Мне интересно, могу ли я анимировать группу путей непосредственно в файле svg?

У меня есть сложный файл svg, и я хотел бы масштабировать только одну часть, которую я обернул в <g> element.

Я пробовал что-то подобное, но ничего не произошло.

<g id="Fire">
      <path/>
      <circle/>
      <path fill="#FEC33A" d="M216.562,546.14c-0.13-0.38-0.26-0.75-0.4-1.12C216.302,545.38,216.442,545.76,216.562,546.14z"/>
      <path fill="#F27D16" d="M215.032,573.37c-0.15-0.19-0.3-0.37-0.46-0.54C214.742,573.01,214.892,573.19,215.032,573.37z"/>
    <animateTransform attributeName="transform"
                          attributeType="XML"
                          type="scale"
                          from="1"
                          to="1.1"
                          dur="2s"
                          repeatCount="indefinite"/>
</g>

Answer 1

Если вы хотите использовать SMIL-анимацию, вы можете поместить группу в элемент <defs> и повторно использовать ее с <use>.Тогда вы можете анимировать элемент использования

svg{border:1px solid; overflow:visible}
path{stroke:black;}

<svg viewBox="210 540 15 40" width="100">
<defs>
  <g id="Fire">
      <path  d="M216.562,546.14
                c-0.13-0.38-0.26-0.75-0.4-1.12C216.302,545.38,216.442,545.76,216.562,546.14z">
        
        
  </path>
      <path d="M215.032,573.37c-0.15-0.19-0.3-0.37-0.46-0.54C214.742,573.01,214.892,573.19,215.032,573.37z"/>
 
</g>
  </defs> 
  
  <use xlink:href="#Fire" >
    <animateTransform attributeName="transform"
                          attributeType="XML"
                          type="scale"
                          from="1"
                          to="1.1"
                          dur="2s"
                          repeatCount="indefinite"/>
  </use>
  
</svg>

PS Полагаю, у вас может быть причина использовать такие сложные пути вместо строки