调整svg文件中的一组路径的大小-Java 学习之路

我想知道我是否可以直接在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>

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 回答

相关问题