Transition is not working in IE10

Question

I am using following code for animating svg path. This works fine in chrome and firefox. But in IE scaling one happens. Transition is not working. Please find my code

 function transform() { var scale = "scale(2 2)"; var path = document.getElementById("scale"); //path.setAttribute('transform', scale); //path.style.transition = "all 2s"; var style = document.createElement('style'); style.type = "text/css"; style.innerHTML = '.two{-webkit-transition: all 5s 0.5s;transition: all 5s 0.5s;} .grow{-webkit-transform: scale(2.0,2.0);}'; document.body.appendChild(style); path.setAttribute('class', 'two grow'); } 

 <button onclick="transform()">Scale</button> <svg width="900" height="600"> <g transform="translate(110,110)"> <path d="M0 -43.3 50 43.3 -50 43.3Z" fill=" yellow" stroke="blue" stroke-width="2" id="scale" /> </g> </svg> 

Any suggestions to achieve this kind of animation in IE10?

Answer 1

If you do not have a proper doctype declaration as the very first line in a document, IE will enter compatibility mode and most features will not work as expected. Ensure that you have a valid doctype (!DOCTYPE html will be fine) and add meta http-equiv="X-UA-Compatible" content="IE=edge" to your document .