Html 如何使SVG在移动设备上工作？

我有一个简单的SVG动画

HTML:

这个SVG的问题是，它只在桌面浏览器上工作。当我在手机（iOS8上最新的Chrome和Safari）和原生安卓棒棒糖浏览器上测试时，它并没有显示出来

我已经尝试添加

，但仍然不起作用

---

我应该怎么做才能使这个SVG同时在桌面和移动设备上工作？

对于移动浏览器上的SVG，SVG SMIL动画（又名

）比css动画更有效，如下所示

<animate xlink:href="#checkmark__check" 
         attributeName="stroke-dashoffset" 
         from="48" 
         to="0"
         dur="3s" 
         fill="freeze">


这里有一个关于SMIL动画的CSS技巧教程：
在桌面上对我来说都不起作用（在chrome或opera中）在chrome上可以很好地工作（V44.0.2403.155）好的，但是为什么选中标记动画较慢，圆圈背景是黑色的（它的原始颜色是绿色的）？Nvm，刚刚找到了更改持续时间和颜色的方法。这只是一个简单的示例：）
.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #7ac142;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 20px auto;
  box-shadow: inset 0px 0px 0px #7ac142;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #7ac142;
  }
}

<animate xlink:href="#checkmark__check" 
         attributeName="stroke-dashoffset" 
         from="48" 
         to="0"
         dur="3s" 
         fill="freeze">