SVG shape change animation

Question

Good day dear. Please tell me why I can not translate from one form of SVG to another? Here is an example.

<svg class="keyhole" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"> <path id="minKeyhole" fill="red" stroke="#231F20" stroke-width="1" d="M50.3,50.1l-0.1-0.7c0.1,0,0.1-0.1,0.1-0.2c0-0.1-0.1-0.2-0.2-0.2c-0.1,0-0.2,0.1-0.2,0.2 c0,0.1,0,0.1,0.1,0.2c0,0,0,0,0,0l-0.2,0.7L50.3,50.1L50.3,50.1z" /> <animate xlink:href="#minKeyhole" dur="5s" repeatCount="indefinite" attributeName="d" values=" M50.3,50.1l-0.1-0.7c0.1,0,0.1-0.1,0.1-0.2c0-0.1-0.1-0.2-0.2-0.2c-0.1,0-0.2,0.1-0.2,0.2 c0,0.1,0,0.1,0.1,0.2c0,0,0,0,0,0l-0.2,0.7L50.3,50.1L50.3,50.1z; M67.5,82.9l-8.8-39.7c3.9-2.7,6.5-7.2,6.5-12.2c0-8.2-6.6-14.9-14.9-14.9S35.5,22.8,35.5,31 c0,4.6,2.1,8.6,5.3,11.4c0.4,0.3,0.8,0.6,1.2,0.9l-9.4,39.7H67.5z" keyTimes="0;1" /> </svg>

Why it does not recalculate transitions, but just knocks key frames? How to correct that this jerk would not be, and there was a smooth transition?

Possible duplicate question: js library for changing forms in SVG elements

Community spirit ♦ one · Accepted Answer · 2017-01-22T21:16:35

Apparently morphing the patch and scaling in one bottle does not work. Maybe I am mistaken, it is necessary to investigate this issue. At least I did not succeed either. When the scale does not change everything works. An example below.

 <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="keyhole" version="1.1" viewBox="0 0 250 250" id="svg2" width="250" height="250" style="border:1px solid blue;"> <rect width="100%" height="100%" fill="dodgerblue" /> <path id="minKeyhole" d="M 100 200 C 100 100 200 100 200 100" fill="none" stroke="white" stroke-width="3"> <animate dur="5s" begin="0.1s" repeatCount="indefinite" attributeName="d" values="M 100 200 C 100 100 200 100 200 100; M 100 100 C 80 150 200 100 150 250; M 200 200 C -80 350 50 20 100 50; M 150 100 C 80 150 350 100 150 50; M 100 200 C 100 100 200 100 200 100" /> </path> </svg>

You can apply the zoom-in animation - scale , but the coordinates of the figure will be recalculated and the increase will be combined with the movement of the figure, which apparently does not suit you either.

 <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="keyhole" version="1.1" viewBox="0 0 1200 1200" id="svg2" width="300" height="300" style="border:1px solid dodgerblue;"> <path id="minKeyhole" fill="red" stroke-width="1" stroke="black" d="M67.5,82.9l-8.8-39.7c3.9-2.7,6.5-7.2,6.5-12.2c0-8.2-6.6-14.9-14.9-14.9S35.5,22.8,35.5,31 c0,4.6,2.1,8.6,5.3,11.4c0.4,0.3,0.8,0.6,1.2,0.9l-9.4,39.7H67.5z"> <animateTransform attributeName="transform" attributeType="XML" type="scale" values="1;11" additive="sum" begin="0s" dur="5s" fill="freeze"/> </path> </svg>

An interesting option using the viewBox animation. Here you can simultaneously increase the scale by reducing the coordinates of the viewBox and keep the shape in the center by changing the attributes of the viewBox - min-x and min-y Learn more here and here .

 <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="keyhole" version="1.1" viewBox="-550 -550 1200 1200" id="svg2" width="300" height="300" style="border:1px solid red;"> <path id="minKeyhole" fill="red" stroke-width="1" stroke="black" d="M67.5,82.9l-8.8-39.7c3.9-2.7,6.5-7.2,6.5-12.2c0-8.2-6.6-14.9-14.9-14.9S35.5,22.8,35.5,31 c0,4.6,2.1,8.6,5.3,11.4c0.4,0.3,0.8,0.6,1.2,0.9l-9.4,39.7H67.5z" /> <animate attributeName = "viewBox" begin = "0s" dur = "10s" values = "-550 -550 1200 1200;-25 -25 150 150;-550 -550 1200 1200" fill = "freeze" repeatCount="indefinite" /> </svg>

One more example. Added pattern.

 <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="keyhole" version="1.1" viewBox="-550 -550 1200 1200" id="svg2" width="300" height="300" style="border:1px solid red;"> <defs> <pattern id="newpattern" x="0" y="0" width="80" height="80" patternUnits="userSpaceOnUse" > <g fill="#85D2FF" fill-opacity="0.7"> <rect x="0" y="0" width="40" height="40" /> <rect x="40" y="40" width="40" height="40" /> </g> </pattern> </defs> <rect x="-550" y="-550" width="100%" height="100%" style=" fill: url(#newpattern);" /> <path id="minKeyhole" fill="red" stroke-width="1" stroke="black" d="M67.5,82.9l-8.8-39.7c3.9-2.7,6.5-7.2,6.5-12.2c0-8.2-6.6-14.9-14.9-14.9S35.5,22.8,35.5,31 c0,4.6,2.1,8.6,5.3,11.4c0.4,0.3,0.8,0.6,1.2,0.9l-9.4,39.7H67.5z" /> <animate attributeName = "viewBox" begin = "0s" dur = "10s" values = "-550 -550 1200 1200;-25 -25 150 150;-550 -550 1200 1200" fill = "freeze" repeatCount="indefinite" /> </svg>

Unfortunately, I read that modern browsers are gradually abandoning SMIL animations. SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed.
w3schools.com/cssref/css3_pr_animation.asp Because of what I had to sculpt with CSS codepen.io/BlackStar1991/pen/MJmQJv I really didn’t understand why I have a garbage bardur around my svg work. (with id #drawer)
Rumors about the imminent demise of SMIL SVG are greatly exaggerated.
Year already as this question is discussed in the community of Google Chrome.
Chrome developers motivated their desire to remove the animation by saying that little is used on the SMIL web. Therefore, all of us who like SVG animation need to apply it more.

SVG shape change animation

1 answer 1

More articles: