Cordova SVG stroke-dashoffset 动画不起作用答案

【问题标题】：Cordova SVG stroke-dashoffset animation not workingCordova SVG stroke-dashoffset 动画不起作用
【发布时间】：2016-07-26 02:47:48
【问题描述】：

我在 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%;

但它不起作用。

你有什么想法吗？谢谢！

【问题讨论】：

标签： android css cordova svg

【解决方案1】：

我今天遇到了同样的问题，我的决定是在动画中添加第二次。还添加了所有 -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 中。

【讨论】：