Cordova SVG stroke-dashoffset動畫無效

我在Cordova（版本6.0.0）中遇到了svg動畫的問題：我的Android上沒有顯示破折號（圓圈已滿）。Cordova SVG stroke-dashoffset動畫無效

行爲在我的Android 5.0：在我的Chrome檢查

行爲：

這裏一個demo，如果你想

下面是HTML：

<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>

這裏是CSS：

.path { 
    stroke-dasharray: 187; 
    stroke-dashoffset: 0; 
    -webkit-transform-origin: center; 
    transform-origin: center; 
    stroke: #4285F4; 
    -webkit-animation: dash 1.4s ease-in-out infinite; 
    animation: dash 1.4s ease-in-out infinite; 
} 

@-webkit-keyframes dash { 
    0% { 
     stroke-dashoffset: 187; 
    } 
    50% { 
     stroke-dashoffset: 46.75; 
    } 
    100% { 
     stroke-dashoffset: 187; 
    } 
} 
@keyframes dash { 
    0% { 
     stroke-dashoffset: 187; 
    } 
    50% { 
     stroke-dashoffset: 46.75; 
    } 
    100% { 
     stroke-dashoffset: 187; 
    } 
}

我試圖把

負值，如：stroke-dasharray: -187;
百分比值，如：stroke-dasharray: 50%;

但它不起作用。

你有什麼想法嗎？謝謝！

來源

2016-04-05 Jacques Cornat

今天我有同樣的問題，我的決議是第二次添加到動畫。還添加了所有-webkit前綴。這第二次是動畫延遲。

#M_x5F_Flow > path { 
    stroke-dasharray: 4; 
    stroke-dashoffset: 200; 
    animation-fill-mode: forwards; 
    animation: dash 10s 0s linear; 
    -webkit-animation: dash 5s 0s linear; 
    animation-iteration-count: infinite; 
    -webkit-animation-iteration-count: infinite; 
} 

@keyframes dash { 
    from { 
    stroke-dashoffset : 200; 
    } 
    to { 
    stroke-dashoffset: 0; 
    } 
} 

@-webkit-keyframes dash { 
    from { 
    stroke-dashoffset : 200; 
    } 
    to { 
    stroke-dashoffset: 0; 
    } 
}

這適用於Phonegap Android 5.0，即使在SVG中也是如此。

來源

2017-02-12 07:27:19

Cordova SVG stroke-dashoffset動畫無效

回答

相關問題