All geek questions in one place

Css transition animation not working with changing attribute "d" in svg

jsFiddle

I am trying to apply css transition to svg to various elements. transition: all 2s works fine for a circle, but it doesn't work for a path.

How is there something more specific than "everything"?

Edition:

The link below contains more information about animating a line or svg path ... and it seems like this is not possible with the css transition yet ...

Can you use CSS transitions in SVG attributes? How is y2 on the line?

+5
source share
1 answer

Transitions can only be applied to presentation attributes and several other attributes, such as x, y, cx, cy ... a list of supported attributes can be found here http://dev.w3.org/SVG/proposals/css-animation/animation- proposal.html Unfortunately, d is not one of them ...

since it is still not reliably supported in browsers, you can use SMIL animations to achieve the same result.

 var type = true; setInterval(function() { $("#path").attr('from', type ? "M 0 0 L 50 100" : "M 0 0 L 100 50"); $("#path").attr('to', type ? "M 0 0 L 100 50" : "M 0 0 L 50 100"); $("#path")[0].beginElement() $("#circle").attr('from', type ? "40" : "10"); $("#circle").attr('to', type ? "10" : "40"); $("#circle")[0].beginElement() type = !type; }, 1000); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <svg> <path stroke="#000000" stroke-width="5" d="M 0 0 L 100 50" > <animate id="path" attributeName="d" from="M 0 0 L 100 50" to="M 0 0 L 50 100" dur="1s" fill="freeze"/> </path> <circle fill="#0000FF" cx="10" cy="50" r="10" > <animate id="circle" attributeName="cx" from="10" to="40" dur="1s" fill="freeze"/> </circle> </svg>
+5
source

Source: https://habr.com/ru/post/1232065/

More articles:


All Articles