Ich habe ein Problem mit meiner SVG-Animation in Cordova (Version 6.0.0): Bindestriche sind nicht auf meinem Android angezeigt (der Kreis ist voll).Cordova SVG Strich-Dashoffset Animation funktioniert nicht
Verhalten auf meinem Android 5.0:
Verhalten auf meinem Chrom Inspektor:
hier ein demo, wenn Sie
Hier wollen, ist die HTML:
Hier<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>
ist die 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;
}
}
ich versucht habe
- negativen Wert zu setzen, wie:
stroke-dasharray: -187;
- Prozent Wert, wie:
stroke-dasharray: 50%;
aber es funktioniert nicht.
Haben Sie irgendwelche Ideen? Vielen Dank !