过渡不能在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中工作

回答

相关问题