Question

我将@keyframes动画用于s svg中的路径，但是在IE10和IE11中不起作用。我已经尝试了一些答案，但是仍然无法正常工作。

在IE浏览器的DOM Explorer中看不到@keyframes详细信息。

html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9;IE=10;IE=11;IE=edge,chrome=1">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="2.css" />
</head>
<body>

<div width='100px' hesight='30px'>
<svg id="one" xmlns="http://www.w3.org/2000/svg" width="400px"height="200px" viewbox="0 0 200 100">
    <path id="chain_st"  d="m0,0 v100 h200 v-100 h-200 z"fill="transparent" stroke="green" stroke-width="1" stroke-dasharray="6" stroke-dashoffset="0"></path>
    <path id="chain_st1"  d="m0,0 v100 h200 v-100 h-200 z" fill="transparent" stroke="white" stroke-width="1" stroke-dasharray="6" stroke-dashoffset="6"></path>
</svg>
</div>

</body>
</html>

css：

@-webkit-keyframes dash {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 4000; }
}

@-moz-keyframes dash {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 4000; }
}

@-o-keyframes dash {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 4000; }
}

@keyframes dash {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 4000; }
}

#chain_st{
-webkit-animation: dash 120s infinite linear;
-moz-animation: dash 120s infinite linear;
-o-animation: dash 120s infinite linear;
animation: dash 120s infinite linear;
}

@-webkit-keyframes dash1 {
0% { stroke-dashoffset: 6; }
100% { stroke-dashoffset: 4006; }
}

@-moz-keyframes dash1 {
0% { stroke-dashoffset: 6; }
100% { stroke-dashoffset: 4006; }
}

@-o-keyframes dash1 {
0% { stroke-dashoffset: 6; }
100% { stroke-dashoffset: 4006; }
}

@keyframes dash1 {
0% { stroke-dashoffset: 6; }
100% { stroke-dashoffset: 4006; }
}

#chain_st1{
-webkit-animation: dash1 120s infinite linear;
-moz-animation: dash1 120s infinite linear;
-o-animation: dash1 120s infinite linear;
animation: dash1 120s infinite linear;
}

除IE10 / 11之外，此方法在其他任何地方均正常运行，这让我发疯。

我在做什么错了？

请帮助我。

svg路径的@keyframes在IE10中不起作用11

0 个答案: