2

I'm trying to animate a circle fill using an SVG. It works beautifully in Chrome, FF, Safari, but in IE the animation will not happen. I'm using jQuery animate (not css animations, which IE 11 and down do not support for SVGs).

Simplified Animation Code:

var animateSvg = function() {
  setTimeout(function(){
    $('#oil-can-svg .inner-circle').animate({'strokeDashoffset': 382});
  }, 1050); 
}

$document.ready(function() {
  animateSvg();
})

You can see my SVG code here: https://jsfiddle.net/ingridly/j09L5jLf/

The issue appears to be that IE is not rendering the element with the stroke on it. One clue is that if you toggle the stroke-width property in the inspector, IE will render the stroke first at its default value of a 1px width when you toggle the class off, and then at the width I specify when you toggle it on.

I've tried adding the stroke-width via js, removing the timeout in the js, removing that inner circle overlay, adding the stroke width as an attribute directly onto the svg, and animating it manually following this advice: Animate Path in Internet Explorer. The net result is that the SVG displays, but in IE 11 and 10 (don't need to worry about 9 and 8), the white stroke that's supposed to animate does not ever appear.

Community
  • 1
  • 1
ingridly
  • 159
  • 10
  • Looks like an IE bug - seems to work with a 6px stroke. http://stackoverflow.com/q/31858485/3168107 – Shikkediel Jan 06 '16 at 21:45
  • Yes, unfortunately I just figured that out. I saw the animation happen (yay!) but it will only do so when it's 1px wide. The jsfiddle works with up to 6, but the real page only agreed with 1. No matter, you can't transform svg elements in IE (maybe could have scaled it?) so 1px or 6px ain't gonna help. – ingridly Jan 06 '16 at 22:51
  • Scaling was my first thought too but then found out that won't work on a `path`, like you mentioned. Probably the only option would be to scale the svg completely because that does seem to have an effect. – Shikkediel Jan 06 '16 at 23:53

0 Answers0