首页 文章

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

提问于
浏览 404
0

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

  • 0

    如果要使用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 我想你可能有理由使用这种复杂的路径而不是一条线

相关问题