Переход не работает в IE10

Question

Я использую следующий код для анимации пути svg. Это отлично работает в Chrome и firefox. Но в IE масштабирование происходит. Переход не работает. Вы можете найти мой код

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>

Любые предложения по достижению такого рода анимации в IE10?

Answer 1

Если у вас нет правильной декларации doctype в качестве самой первой строки в документе, IE войдет в режим совместимости, и большинство функций не будут работать должным образом. Убедитесь, что у вас есть действительный doctype (! DOCTYPE html будет в порядке) и добавьте в свой файл meta http-equiv = "X-UA-Compatible" content = "IE = edge".