SVG微调器没有出现在IE11上

时间:2017-01-27 14:55:13

标签: html css internet-explorer animation svg

我正在使用此codepen中的材质微调器:https://codepen.io/mrrocks/pen/EiplA

它在IE以外的所有浏览器中都能完美显示。

这是SVG图标:

ARGC

然后我们让LESS旋转,以及所有这些:

<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
   <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>

根据caniuse.com:http://caniuse.com/#search=svghttp://caniuse.com/#feat=css-animation,我可以告诉我使用的所有内容似乎都支持IE11。

我尝试添加$offset: 187; $duration: 1.4s; .spinner { animation: rotator $duration linear infinite; } @keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(270deg); } } .path { stroke-dasharray: $offset; stroke-dashoffset: 0; transform-origin: center; animation: dash $duration ease-in-out infinite, colors ($duration*4) ease-in-out infinite; } @keyframes colors { 0% { stroke: #4285F4; } 25% { stroke: #DE3E35; } 50% { stroke: #F7C223; } 75% { stroke: #1B9A59; } 100% { stroke: #4285F4; } } @keyframes dash { 0% { stroke-dashoffset: $offset; } 50% { stroke-dashoffset: $offset/4; transform:rotate(135deg); } 100% { stroke-dashoffset: $offset; transform:rotate(450deg); } } ,但没有效果。

有什么想法吗?

0 个答案:

没有答案