Cordova SVG stroke-dashoffset动画无效

时间:2016-04-05 23:03:38

标签: android css cordova svg

我在Cordova(版本6.0.0)中遇到svg动画的问题:我的Android上没有显示破折号(圆圈已满)。

我的Android 5.0上的行为:

enter image description here

我的chrome检查员的行为:

enter image description here

如果你想要

,请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%;

但它不起作用。

你有什么想法吗?谢谢!

1 个答案:

答案 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中使用。