Snap.SVG EDGE / IE - jQuery 动画停止答案

【问题标题】：Snap.SVG EDGE / IE - jQuery Animation stopsSnap.SVG EDGE / IE - jQuery 动画停止
【发布时间】：2016-12-28 22:13:02
【问题描述】：

您好，我在 IE 和 EDGE 中运行动画时遇到问题（在 Chrome 中正常）。

我收到“文本后”警报，但“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 停止？

提前致谢！

【问题讨论】：

我不确定您是否可以将转换正确应用于 tspan 元素。
@Ian 嗨，Ian，嗯，好吧，我要如何解决这个问题，我正在尝试淡入 tpsan，它在 Chrome 中有效，这只是一个 IE 的东西吗？
@Ian 尝试使用填充不透明度，但没有成功！

标签： jquery svg jquery-animate snap.svg svg-animate

【解决方案1】：

看起来@Ian 为我指明了正确的方向。

由于某些原因 IE 不喜欢 tspan 元素的不透明度，我改为将这些应用于 g 标签，效果很好。

另一个喜欢 IE 的理由 :)

【讨论】：