Snap.SVG边缘/ IE浏览器 - jQuery动画停止

嗨我有一个动画只是停止在IE和EDGE（罚款在Chrome中）运行的问题。Snap.SVG边缘/ IE浏览器 - jQuery动画停止

我得到了“文本后”的提示，但“textone1”等的不透明度仍然在开发工具中为0，IE完全停止了动画。

我确实在IE中得到一个控制台错误“对象不支持属性或方法'getCTM' - snap.svg-min.js（19,26680）”，这是我在Chrome中没有得到的。

下面是运行时，它停止代码：

HTML：

<g xmlns="http://www.w3.org/2000/svg" id="text" style="opacity: 1;" transform="matrix(1 0 0 1 -70 -150)"> 
<text id="XMLID_2_"> 
    <tspan class="st1 st2 bold textone1" style="opacity: 0;" x="-20" y="0">TEXT1</tspan> 
    <tspan class="st3 st2 textone2" style="opacity: 0;" x="74" y="0">TEXT2</tspan> 
    <tspan class="st3 st2 textone3" style="opacity: 0;" x="15" y="50">TEXT3</tspan> 
    <tspan class="st4 st2 bold textone4" style="opacity: 0;" x="305" y="50">TEXT4</tspan> 
    <tspan class="st3 st2 textone4" style="opacity: 0;" x="640" y="50">.</tspan> 
</text> 
</g>

JS：

var text = s.selectAll("#text"); 
var textone1 = s.selectAll("#text .textone1"); 
var textone2 = s.selectAll("#text .textone2"); 
var textone3 = s.selectAll("#text .textone3"); 
var textone4 = s.selectAll("#text .textone4"); 

textone1.attr({ 
    opacity: 0 
}); 
textone2.attr({ 
    opacity: 0 
}); 
textone3.attr({ 
    opacity: 0 
}); 
textone4.attr({ 
    opacity: 0 
}); 

text.animate({ 
    transform: "t-290,-150", 
    opacity:0, 
}, 0, mina.easein, function() { 
}); 

text.animate({ 
      transform: "t-70,-150", 
      opacity: 1 
     }, 0, mina.easeinout,function() { 

      alert("after text"); 

     textone1.animate({ 
      transform: "t-290,-150", 
      opacity: 1 
     }, 500, mina.easeinout); 

      textone2.animate({ 
      transform: "t-290,-150", 
      opacity: 1 
      }, 1000, mina.easeinout); 

      textone3.animate({ 
       transform: "t-290,-150", 
       opacity: 1 
      }, 1000, mina.easeinout); 

       textone4.animate({ 
       transform: "t-290,-150", 
       opacity: 1 
       }, 1000, mina.easeinout); 

});

有人能看到什么，我可能会做错误导致IE/EDGE停止？

提前致谢！

来源

2016-08-22 KiwisTasteGood

我不确定你可以正确地将转换应用到tspan元素。 – Ian

@伊恩伊恩，啊好的确定，所以我怎么解决这个问题我想淡化tpsan，它在Chrome中的作用就是只是一个IE的东西？ – KiwisTasteGood

@Ian试图使用填充不透明度，而没有运气！ – KiwisTasteGood

看起来像@Ian指出我正确的方向。

出于某种原因，IE不喜欢tspan元素上的不透明度，我反而将这些应用于g标签，它工作正常。

爱IE的另一个原因:)

来源

2016-08-22 13:30:06 KiwisTasteGood

Snap.SVG边缘/ IE浏览器 - jQuery动画停止

回答

相关问题