2015-09-28 3 views
0

Я создал индикатор загрузки SVG. Он отлично работает в Chrome и др, но я, кажется, не могу получить его работу в IE10 - вот скрипка: https://jsfiddle.net/288mu88o/IE10 CSS анимация для ключевого кадра

@keyframes loading { 
    0% { 
     fill: red; 
    } 
    100% { 
     fill: yellow; 
    } 
} 

.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12, .c13, .c14, .c15 { 
    animation: loading 1.5s infinite; 
} 

.c1 { 
    animation-delay: 1.4s; 
} 
.c2 { 
    animation-delay: 1.3s; 
} 
.c3 { 
    animation-delay: 1.2s; 
} 

... 

<g> 
    <circle fill="#D9E2E7 " cx="294.7" cy="342.1" r="3.5" class="c1" /> 
</g> 
<g> 
    <circle fill="#D9E2E7 " cx="281.3" cy="344.8" r="3.5" class="c2"/> 
</g> 
<g> 
    <circle fill="#D9E2E7 " cx="270.2" cy="352.7" r="3.5" class="c3"/> 
</g> 

... 

Что мне не хватает?

Спасибо.

+0

IE10 (или 11) не поддерживает анимацию CSS данных SVG. Для этого вам понадобится IE Edge: https://dev.modern.ie/platform/status/csstransitionsanimationsforsvgelements/ –

+0

Привет, спасибо за ответ, это очень ценится. У меня уже есть метатег, определенный в моем index.html, например. . Это то, о чем вы говорите? Если это так, это не имеет значения. – user3034151

+0

Вы не можете обновить IE10 до края IE, добавив метатег. Вам нужно установить сам край IE. Разработчики могут реализовывать обратную совместимость, но при отсутствии совместимости с машиной времени машина несколько сложнее. –

ответ

0

IE 10 не поддерживает CSS-анимацию SVG. Вы можете использовать стороннее решение, например Fakesmile

+0

Fakesmile предназначен для SMIL, а не для анимации CSS. –

Смежные вопросы