Snap.SVG EDGE/IE - jQuery 애니메이션이 중지됩니다.

안녕하세요. 애니메이션의 문제가 IE 및 EDGE (Chrome의 경우)에서 실행되는 중간에 멈추는 중입니다.Snap.SVG EDGE/IE - jQuery 애니메이션이 중지됩니다.

"텍스트 이후"경고가 표시되지만 "textone1"등의 불투명도는 개발자 도구에서 여전히 0으로 설정되어 있으며 IE는 애니메이션 전체를 중지합니다.

IE에서 콘솔 오류가 발생합니다. "Chrome에서 가져올 수없는 개체가 'getCTM'- snap.svg-min.js (19,26680) 속성 또는 메서드를 지원하지 않습니다.

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

@Ian 안녕 이안, 아 그래 그래, 어떻게 내가 tpsan을 퇴색 시키려고하는지이 주위에 갈 수 있을까? 크롬에서 작동하는 것은 단지 IE의 것입니까? – KiwisTasteGood

@Ian 행운을 묻지 않고 채우기 불투명도를 사용하려고했습니다! – KiwisTasteGood

@Ian이 올바른 방향으로 나를 가리키는 것처럼 보입니다.

IE에서 tspan 요소의 불투명도가 좋지 않은 대신 g 태그에 적용하여 정상적으로 작동합니다.

IE를 사랑하는 또 다른 이유 :

출처

2016-08-22 13:30:06 KiwisTasteGood

Snap.SVG EDGE/IE - jQuery 애니메이션이 중지됩니다.

답변

관련 문제