IE10ではトランジションが機能しません

Question

svgパスのアニメーションには次のコードを使用しています。これはchromeとfirefoxで正常に動作します。しかし、IEスケーリングでは、1つが発生します。移行は機能していません。私のコード

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"をドキュメントに追加してください。