Share Posted April 23, 2015 Hey there. Seem to be having some issues with the draw SVG plugin on IE when trying to animate a circles stroke around a central point to fill up the background. The Problem only occurs on IE When the dial type animation becomes glitchey. The Codepen example shows this. See the Pen oXNovy by joshscorrar (@joshscorrar) on CodePen 1 Link to post Share on other sites
Share Posted April 23, 2015 Thanks for the pen It looks like DrawSVGPlugin is doing its job and that it could just be an IE rendering issue that occurs when the stroke width is the same as the radius of the circle. Knocking the stroke width down from 50 to 20 and everything looked smooth and clean. Make it greater than 60 (even in other browsers) and the stroke will cut into itself too. Interested in other ideas, but that's my best assessment at the moment 1 Link to post Share on other sites
Author Share Posted April 23, 2015 Thanks for the Quick Reply. Yeah I tried that too, really need the stroke too fill up the whole gray background. Any other thoughts on how to achieve this effect using SVG? I can do it using canvas but I use drawSVG in many other places on my site and want to stick with one method of animating these effects. Link to post Share on other sites
Solution Share Posted April 23, 2015 Here is a test without DrawSVGPlugin, just to show how IE renders the stroke cutting into itself even when static: http://codepen.io/anon/pen/PqoeQj I came a cool demo from a css-tricks article. It uses some CSS, uh, tricks. It's not SVG but I imagine it would be totally possible to control the animation with GSAP. 1 Link to post Share on other sites
Author Share Posted April 27, 2015 Awesome, thanks for the links. I will look into them! Link to post Share on other sites
