Animation svg中的形状变形动画工作不正常

Animation svg中的形状变形动画工作不正常,animation,svg,svg-animate,Animation,Svg,Svg Animate,我使用了SMIL动画标记,但是将一个形状变形为另一个形状不起作用。 请查看我的svg文件,并让我了解任何类型的解决方案 我已经为这个动画尝试了标签和CSS,但两种解决方案都不起作用 <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg versi

我使用了SMIL动画标记,但是将一个形状变形为另一个形状不起作用。 请查看我的svg文件,并让我了解任何类型的解决方案

我已经为这个动画尝试了标签和CSS,但两种解决方案都不起作用

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1080 1080" style="enable-background:new 0 0 1080 1080;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#2758F6;}


    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 viewBox="0 0 1080 1080" style="enable-background:new 0 0 1080 1080;" xml:space="preserve">
    <style type="text/css">
    	.st0{fill:#2758F6;}
    </style>
    <path>

    	<animate repeatCount="indefinite" attributeName="d" dur="5s"
    	
    	values="M917.58,565.98L192.42,984.66c-20,11.55-45-2.89-45-25.98V121.32c0-23.09,25-37.53,45-25.98
    	l725.17,418.68C937.58,525.57,937.58,554.43,917.58,565.98z;

    	M905.06,935.06H174.94c-16.57,0-30-13.43-30-30V174.94c0-16.57,13.43-30,30-30h730.12
    	c16.57,0,30,13.43,30,30v730.12C935.06,921.63,921.63,935.06,905.06,935.06z;

    		M917.58,565.98L192.42,984.66c-20,11.55-45-2.89-45-25.98V121.32c0-23.09,25-37.53,45-25.98
    	l725.17,418.68C937.58,525.57,937.58,554.43,917.58,565.98z
    				

    		"></animate>
    	
    </path>



    </svg>
    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 viewBox="0 0 1080 1080" style="enable-background:new 0 0 1080 1080;" xml:space="preserve">
    <style type="text/css">
    	.st0{fill:#2758F6;}
    </style>
    <path>

    	<animate repeatCount="indefinite" attributeName="d" dur="5s"
    	
    	values="M917.58,565.98L192.42,984.66c-20,11.55-45-2.89-45-25.98V121.32c0-23.09,25-37.53,45-25.98
    	l725.17,418.68C937.58,525.57,937.58,554.43,917.58,565.98z;

    	M905.06,935.06H174.94c-16.57,0-30-13.43-30-30V174.94c0-16.57,13.43-30,30-30h730.12
    	c16.57,0,30,13.43,30,30v730.12C935.06,921.63,921.63,935.06,905.06,935.06z;

    		M917.58,565.98L192.42,984.66c-20,11.55-45-2.89-45-25.98V121.32c0-23.09,25-37.53,45-25.98
    	l725.17,418.68C937.58,525.57,937.58,554.43,917.58,565.98z
    				

    		"></animate>
    	
    </path>



    </svg>
    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 viewBox="0 0 1080 1080" style="enable-background:new 0 0 1080 1080;" xml:space="preserve">
    <style type="text/css">
    	.st0{fill:#2758F6;}
    </style>
    <path>

    	<animate repeatCount="indefinite" attributeName="d" dur="5s"
    	
    	values="M917.58,565.98L192.42,984.66c-20,11.55-45-2.89-45-25.98V121.32c0-23.09,25-37.53,45-25.98
    	l725.17,418.68C937.58,525.57,937.58,554.43,917.58,565.98z;

    	M905.06,935.06H174.94c-16.57,0-30-13.43-30-30V174.94c0-16.57,13.43-30,30-30h730.12
    	c16.57,0,30,13.43,30,30v730.12C935.06,921.63,921.63,935.06,905.06,935.06z;

    		M917.58,565.98L192.42,984.66c-20,11.55-45-2.89-45-25.98V121.32c0-23.09,25-37.53,45-25.98
    	l725.17,418.68C937.58,525.57,937.58,554.43,917.58,565.98z
    				

    		"></animate>
    	
    </path>



    </svg>

.st0{fill:#2758F6;}

.st0{fill:#2758F6;}
.st0{fill:#2758F6;}
.st0{fill:#2758F6;}

为了平滑地设置所有路径的动画,需要以相同的顺序使用相同类型和数量的命令。您的路径不符合该要求,例如

<animate repeatCount="indefinite" attributeName="d" dur="5s"
values="M917.58,565.98L192.42,984.66....;
   M905.06,935.06H174.94....;
   M917.58,565.98L192.42....

请查看上面的图片。不,您没有。命令仍然不一样。第二个命令是h,然后是l,然后是h。