過渡不能在IE10中工作

我正在使用以下代碼來動畫svg路徑。這適用於Chrome和Firefox。但在IE中，縮放會發生。轉換不起作用。請找我的代碼過渡不能在IE10中工作

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？

來源

2016-12-27 Sanjith

使用setTimeout在JavaScript中編寫它。 IE 10不支持SVG的CSS轉換。 –

-2

如果您沒有正確的文檔類型聲明作爲文檔的第一行，IE將進入兼容模式，大多數功能將無法按預期工作。確保你有一個有效的文檔類型（！DOCTYPE html將會正常），併爲你的文檔添加meta http-equiv =「X-UA-Compatible」content =「IE = edge」。

來源

2016-12-27 10:03:03

無論是處於邊緣模式還是向後兼容模式，IE 10都不支持SVG元素上的CSS轉換。 –

過渡不能在IE10中工作

回答

相關問題