问题
the js fiddle showing the crash of ie 11 when running velocity.js to do a svg animation
just left click on the arrow with the f next to it
this only happens in IE 11, maybe on other versions of IE too.
Chrome works fine as it seems.
HTML
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.1/velocity.js"></script>
</head>
<body>
<style type="text/css">
body {
background-color:#000000
}
#box1 {
position: absolute;
left: 250px;
top: 330px;
width: 257px;
height: 62px;
opacity: 0;
z-index: 1;
}
#box2 {
position: absolute;
right: 250px;
top: 330px;
width: 315px;
height: 62px;
opacity: 0;
z-index: 1;
}
#positionP {
position: absolute;
left: 250px;
top: 330px;
}
#positionG {
position: absolute;
right: 250px;
top: 330px;
}
</style>
<script type="text/javascript">
$(function(){
var lux = {};
lux.isPopen = false;
lux.isGopen = false;
$(".doanimateP").on("click", function(){
$(".animated").velocity("stop", true);
if(lux.isPopen){
$(".animated").velocity("reverse");
lux.isPopen = false;
return;
}
lux.isPopen = true;
if(lux.isGopen){
$(".animated2")
.velocity("stop", true)
.velocity("reverse", {
duration: "50"
});
lux.isGopen = false;
}
$(".toBeAnimatedLine1")
.velocity({ y2: "469"},{
duration: "2000"});
$(".toBeAnimatedLine2")
.velocity({ x2: "50" },{
duration: "350",
delay: "800"});
$(".toBeAnimatedLine3")
.velocity({ x2: "50" },{
duration: "350",
delay: "1000"});
$(".toBeAnimatedLine4")
.velocity({ x2: "50" },{
duration: "350",
delay: "1400"});
$(".toBeAnimatedLine5")
.velocity({ x2: "50" },{
duration: "350",
delay: "1900"});
$(".tanim1")
.velocity({opacity: 1},{
duration: "700",
delay: "800"});
$(".tanim2")
.velocity({opacity: 1},{
duration: "700",
delay: "1000"});
$(".tanim3")
.velocity({opacity: 1},{
duration: "700",
delay: "1400"});
$(".tanim4")
.velocity({opacity: 1},{
duration: "700",
delay: "1900"});
$(".tanim5")
.velocity({opacity: 1},{
duration: "700",
delay: "2100"});
$(".tanim6")
.velocity({opacity: 1},{
duration: "700",
delay: "2300"});
$(".tanim7")
.velocity({opacity: 1},{
duration: "700",
delay: "2500"});
$(".tanim8")
.velocity({opacity: 1},{
duration: "700",
delay: "2700"});
});
});
</script>
<div id="box1" class="doanimateP"></div>
<div id="positionP">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="949.574px" height="625.847px" viewBox="0 0 949.574 625.847" enable-background="new 0 0 949.574 625.847"
xml:space="preserve">
<g>
<g>
<g>
<path fill="#C4C6C8" d="M30.5,60.993c-5.386,0-10.703-1.446-15.376-4.184c-0.455-0.266-0.608-0.853-0.342-1.308
c0.267-0.456,0.854-0.608,1.309-0.342c4.38,2.565,9.362,3.921,14.409,3.921c5.048,0,10.03-1.356,14.408-3.922
c0.455-0.268,1.042-0.114,1.309,0.343c0.267,0.455,0.114,1.041-0.342,1.308C41.204,59.547,35.888,60.993,30.5,60.993z"/>
<path fill="#C4C6C8" d="M9.55,52.259c-0.245,0-0.49-0.095-0.678-0.282C3.15,46.219,0,38.592,0,30.498
c0-8.092,3.15-15.721,8.871-21.479c0.373-0.375,0.979-0.376,1.353-0.005c0.375,0.372,0.377,0.978,0.005,1.352
c-5.363,5.399-8.316,12.55-8.316,20.133c0,7.585,2.953,14.733,8.316,20.131c0.372,0.375,0.37,0.979-0.004,1.353
C10.037,52.166,9.794,52.259,9.55,52.259z"/>
<path fill="#C4C6C8" d="M15.608,5.965c-0.328,0-0.648-0.168-0.826-0.473c-0.267-0.455-0.114-1.041,0.342-1.308
C19.797,1.446,25.114,0,30.5,0s10.703,1.446,15.376,4.185c0.456,0.267,0.608,0.853,0.341,1.308
c-0.267,0.456-0.853,0.61-1.308,0.343C40.528,3.269,35.546,1.912,30.5,1.912c-5.047,0-10.029,1.356-14.409,3.923
C15.938,5.924,15.772,5.965,15.608,5.965z"/>
<path fill="#C4C6C8" d="M51.449,52.259c-0.243,0-0.487-0.093-0.674-0.277c-0.375-0.373-0.377-0.978-0.005-1.353
c5.363-5.396,8.316-12.546,8.316-20.131c0-7.584-2.953-14.733-8.315-20.133c-0.372-0.374-0.37-0.979,0.005-1.352
c0.373-0.373,0.979-0.371,1.352,0.005C57.849,14.777,61,22.405,61,30.498c0,8.094-3.151,15.722-8.872,21.479
C51.941,52.164,51.695,52.259,51.449,52.259z"/>
</g>
<polygon fill="#FFFFFF" points="30.5,44.277 16.5,23.028 30.5,23.028 44.5,23.028 "/>
</g>
<text transform="matrix(1 0 0 1 75 47.875)" fill="#FFFFFF" font-family="'AgfaRotisSansSerif'" font-size="36">f
</text>
<text transform="matrix(1 0 0 1 75 224.875)">
<tspan class="tanim1 animated" style="opacity:0" x="0" y="0" fill="#FFFFFF" font-size="36">e
</tspan>
<tspan class="tanim2 animated" style="opacity:0" x="0" y="86.4" fill="#FFFFFF" font-size="36">d
</tspan>
<tspan class="tanim3 animated" style="opacity:0" x="0" y="172.8" fill="#FFFFFF" font-size="36">c
</tspan>
<tspan class="tanim4 animated" style="opacity:0" x="0" y="252" fill="#FFFFFF" font-size="30">b
</tspan>
<tspan class="tanim5 animated" style="opacity:0" x="0" y="288" fill="#FFFFFF" font-size="30">a
</tspan>
<tspan class="tanim6 animated" style="opacity:0" x="0" y="324" fill="#FFFFFF" font-size="30">z
</tspan>
<tspan class="tanim7 animated" style="opacity:0" x="0" y="360" fill="#FFFFFF" font-size="30">y
</tspan>
<tspan class="tanim8 animated" style="opacity:0" x="0" y="396" fill="#FFFFFF" font-size="30">x
</tspan>
</text>
<line class="toBeAnimatedLine1 animated" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="29" y1="70" x2="29" y2="70"></line>
<line class="toBeAnimatedLine2 animated" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="30" y1="212" x2="30" y2="212"/>
<line class="toBeAnimatedLine3 animated" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="30" y1="298" x2="30" y2="298"/>
<line class="toBeAnimatedLine4 animated" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="30" y1="385" x2="30" y2="385"/>
<line class="toBeAnimatedLine5 animated" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="30" y1="468" x2="30" y2="468"/>
</g>
</svg>
</div>
</body>
</html>
来源：https://stackoverflow.com/questions/28843821/ie-11-magically-crashing-when-doing-animation-with-velocity-js-and-svg