svg 中的形状变形动画无法正常工作答案

【问题标题】：shape morphing animation in svg is not working properlysvg 中的形状变形动画无法正常工作
【发布时间】：2019-12-02 08:24:49
【问题描述】：

我使用了 SMIL animate 标签，但无法将一种形状变形为另一种形状。请查看我的 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>




</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>

三角形应该变成正方形。

【问题讨论】：

标签： animation svg svg-animate

【解决方案1】：

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

<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，然后是 l，然后是 h。