CODEWITHSUNDEEP
animationsvgsvg-animate
Badr Rehman
Badr Rehman

Reputation: 21

shape morphing animation in svg is not working properly

I have used the SMIL animate tag but morphing of one shape to another shape is not working. Please see my svg file and let me know about any kind of solution.

I have already tried tag and CSS for this animation but neither solution worked.

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

Triangle should morph in square.

Upvotes: 2

Views: 552

Answers (1)

Robert Longson
Robert Longson

Reputation: 124059

In order to smoothly animate all the paths need to have the same type and number of commands in the same order. Your paths don't meet that requirement e.g.

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

The second command in the middle path is an H, in the other two paths it's an L. Such disparate paths will not morph.

Upvotes: 1

Related Questions