Прогулка SVG не работает в Mozilla, Opera

Question

Я пытаюсь реализовать этот круговой индикатор выполнения SVG с использованием кода this.

Но он не работает в браузерах, кроме хром. Может ли кто-нибудь сказать мне, в чем проблема?

код, как показано ниже:

HTML

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg width="200px" height="200px" viewBox="-5 0 210 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" class="circle base"></path> 
    <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" class="circle progress" style="-webkit-animation-duration: 5s;"></path> 
</svg> 

CSS

body { 
    margin: 0; 
    height: 100%; 
    } 

svg { 
    display: table; 
    height: 100%; 
    width: 50%; 
    margin-left: 25%; 
    } 

path.circle { 
    display: table-cell; 
    fill: none; 
    stroke: #DEDEDE; 
    stroke-width: 10; 
    stroke-dasharray: 629; 
    vertical-align: middle; 
    -webkit-transform-origin: center center; 
    } 

    path.progress { 
    stroke: #0094CC; 
    -webkit-animation: progress 20s linear; 
    -webkit-transform: rotate(-90deg) scale(1, -1); 
    } 

    path.base { 
    /* -webkit-animation: base 20s linear; */ 
    -webkit-transform: rotate(-90deg); 
    } 

    @-webkit-keyframes progress { 
    from { stroke-dashoffset: 629; } 
    to { stroke-dashoffset: 0; } 
    } 

    @-webkit-keyframes base { 
     from { stroke-dashoffset: 0; } 
     to { stroke-dashoffset: 629; } 
    } 

Любая помощь будет оценена :)

редактировать: мой вопрос в том, добавить ли я свойства для -moz-, -o, но он не работает в firefox или opera .. что может быть проблемой .. в то время как тот же код работает в chrome. отсутствует для firefox или opera .. Я заменил значения -webkit- на -moz-, -o- все равно это не работает.

Answer 1

Я думаю, что при анимации с помощью css попытайтесь адаптировать его ко всем браузерам:

-webkit-animation: progress 20s linear; 
-moz-animation: progress 20s linear; 
-o-animation:  progress 20s linear; 
animation:  progress 20s linear; 

сделать то же самое для всех CSS-анимации, которые имеют -webkit- суффикс, и для преобразования тоже, надеюсь, что это поможет