CODEWITHSUNDEEP
htmlcssanimationsvg
jk-kim
jk-kim

Reputation: 1186

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?

Upvotes: 7

Views: 11234

Answers (1)

Holger Will
Holger Will

Reputation: 7526

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>

Upvotes: 12

Related Questions