過渡在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”添加到您的文檔中。