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 我想您可能有理由使用这种复杂的路径而不是直线

调整SVG文件中一组路径的大小

1 个答案: