Animate SVG element transform (rotate & scale) in IE

Question

I have a animation ( transform + transition ) of an SVG element (an arrow) spinning around a circle (sometimes with scale). It works in latest Chrome, Opera, Firefox (safari I havent tested but I presume it works there as well). But it doesn't work in IE, as the transform for the SVG element there needs to be set with the transform attribute. So I added a line to my script that applies the same transform to the attribute, but the animation doesn't happen, it just "skips" to the new position.

I've made a JSfiddle demo - https://jsfiddle.net/rv28ezfw/3/ In IE, the rotation/scale don't get animated, and I need to find a way to fix that.

Is there a plugin or some function that will take care of the animation in IE for me? Preferably without adjusting the functionality that already works everywhere else..

I was looking at a jQuery SVG plugin and CSS Tricks.com have a demo (at the very bottom of the article) that works in IE as well, but I was hope for something more simple. But if You recommend one or the other Ill go with it.

Answer 1

I wasn't able to figure out why it wasn't working in IE11. Instead, here's a workaround:

 $('#btn').click(function() { // Changed to make demo smoother. $('#container').toggleClass('rotated'); }); 

 #container { /* Resized so it looks better in snippet */ width: 300px; height: 300px; /* So you can see what's going on */ border: 1px solid black; /* Changed to make it transparent, otherwise you may cover other elements */ background: rgba(0,0,0,0); /* So any elements underneath can still receive events */ pointer-events: none; /* Moved here from svg */ transition: all 1.5s ease; } /* Added */ #container.rotated { transform: rotate(45deg); } #btn { padding: 10px; color: #fff; text-align: center; background: green; } .cls-1 { fill: #2bffaa; } .cls-2 { fill: #ccc; } .cls-3 { fill: #f2f2f2; } .cls-4 { fill: #ddd; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="btn">GO</div> <div id="container"> <svg id="scroller" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480"> <title>demo</title> <path id="scroller__outer" class="cls-1" d="M240,147a92.93,92.93,0,0,0-28.29,4.39l5.14,12A80.1,80.1,0,1,1,179.23,188L132.31,226.4c13.11,3.06,15.18,4.06,15.18,4.06S147,236.78,147,240A93,93,0,1,0,240,147Z" /> <path id="scroller__inner" class="cls-2" d="M240,158a84.78,84.78,0,0,0-23.82,3.86l1.76,4.13,6.59,15,0.68,1.44A59.46,59.46,0,1,1,190.56,207l-0.92-1.44-9.17-15.41L179.23,188c-12,14-21.22,32.14-21.22,52,0,44.18,37.82,82,82,82s82-37.82,82-82S284.18,158,240,158Z" /> <circle id="scroll__inner__circle" class="cls-3" cx="240" cy="240" r="51.5" /> <path id="scroll__inner__outline" class="cls-4" d="M240,179a61,61,0,1,0,61,61A61,61,0,0,0,240,179Zm0,117a56,56,0,1,1,56-56A56,56,0,0,1,240,296Z" /> </svg> </div> 

Basically, I rotate #container instead of the SVG itself. Then, it was a matter of moving the transform s onto #container .

Because we're rotating a div , the corners can overlap elements underneath. In this demo, I made it transparent but outlined the borders so you could see them. Because of pointer-events: none , the user won't be prevented from clicking on the "GO" button if a corner of the div overlaps it.

You could also change your SVG a little so there's not so much white space around the icon.