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?
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.
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.
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.
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.
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).
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With