Question

我使用了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>




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

三角形应变形为正方形。

Answer 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。这样的不同路径不会变形。

SVG中的形状变形动画无法正常工作

1 个答案: