Animation svg中的形状变形动画工作不正常
我使用了SMIL动画标记,但是将一个形状变形为另一个形状不起作用。 请查看我的svg文件,并让我了解任何类型的解决方案 我已经为这个动画尝试了标签和CSS,但两种解决方案都不起作用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
<?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。