我在Cordova(版本6.0.0)中遇到svg动画的问题:我的Android上没有显示破折号(圆圈已满)。
我的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%;
但它不起作用。
你有什么想法吗?谢谢!
答案 0 :(得分:0)
今天我遇到了同样的问题,我的解决方案是再次添加动画。还添加了所有-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中使用。