Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css transition animation doesn't work on svg path's "d' attribute change

jsFiddle

I'm trying to apply css transition to svg various elements. transition: all 2s works great for circle however it doesn't work for path.

How is there something more specific then "all"?

EDITED:

Below link has more info animating svg line or path... and it seems that it is not possible with css transition yet...

Can you use CSS transitions on SVG attributes? Like y2 on a line?

like image 451
jk-kim Avatar asked Sep 23 '15 01:09

jk-kim


People also ask

How do you animate elements in SVG?

To animate an SVG path, you specify the attributeName to be d , and then set the from and to values that specify the start and end shapes, and you can use the values attribute to specify any intermediate values you want the shape to go through in between.

What rules apply to CSS animation and CSS transition effects on SVG?

W3C liability, trademark and document use rules apply. This document describes a proposal for applying CSS Animation and CSS Transition effects to values which are currently defined as attributes on SVG.

What are CSS3 animations/transitions?

Providing the same animation of color, movement and effects on vector graphics enables new scenarios not otherwise available including game assets, background other CSS images, and sophisticated advertisements on the web. Other browsers such as Mozilla and Chrome support CSS3 Animations/Transitions on SVG Properties and SVG Presentation Attributes.

Why isn’t my CSS animation working?

Whether your animation isn’t working as intended, or just isn’t working at all, here are some reasons why and how you can resolve them: In CSS animations, the @keyframes rule defines how the animation looks, or, more specifically, which element styles change and when. Without this rule, your element won’t have any animation to use.

How do you animate paths in CSS?

Only paths that have the same number and type of points in them can be animated in CSS. Putting the curve point in there opens doors. These four new paths actually draw something close to a circle! For the other states, I drew a crude checkmark (for SUCCESS) and a crude exclamation point (for FAILURE).


Video Answer


1 Answers

Transitions can only be applied to presentation Attributes, and a few 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 isn't one of them...

as this is still not supported reliably across 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>
like image 133
Holger Will Avatar answered Nov 14 '22 23:11

Holger Will