SVG循環進程在Mozilla，Opera中不起作用

-1

我正在嘗試使用this代碼來實現此SVG循環進度條。SVG循環進程在Mozilla，Opera中不起作用

但它不適用於Chrome以外的瀏覽器。誰能告訴我這有什麼問題？

如下面的代碼：

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 ..我用-moz-，-o-取代了值-webkit-仍然不起作用。

來源

2015-05-19 user3428616

它是如何不工作？ Opera或Firefox在控制檯中拋出什麼錯誤？ –

所以，基本上你想知道爲什麼'-webkit'只能在webkit瀏覽器上運行？ –

我的問題是，如果我添加-moz-，-o-屬性仍然不能在Firefox或Opera中工作..什麼可能是問題..而相同的代碼在鉻中工作.. – user3428616

我認爲當用css動畫時，嘗試使其適應所有瀏覽器：

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

做所有的CSS動畫誰擁有-webkit-後綴同樣的事情，並變換過，希望這有助於

來源

2015-05-19 17:19:37

我已經嘗試添加，但動畫在其他瀏覽器中無法正常工作 – user3428616

我已經在一個項目上工作並具有saame效果，但我沒有用css做動畫，但使用jquery和它在我的瀏覽器中工作我建議你使用jquery進行annimate，使用tween max庫或默認的jquery動畫，併爲stroke-dashoffset proprety –

設置動畫感謝解決方案的解決方案，但我想知道是否有任何屬性丟失或需要做什麼才能工作在其他瀏覽器..它應該工作，如果我給-moz-或-o- ..但仍然這似乎並沒有工作.. – user3428616

SVG循環進程在Mozilla，Opera中不起作用

回答

相關問題