html - 调整 svg 文件中一组路径的大小

Question

我想知道是否可以直接在 svg 文件中为一组路径设置动画？

我有一个复杂的 svg 文件，我只想缩放一部分，我将其包装在 <g> 中元素。

我试过类似的方法，但没有任何反应。

<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> 重用它.然后你可以为 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 我想你可能有理由使用如此复杂的路径而不是一条线