Как заставить SVG работать на мобильных устройствах?

Question

У меня есть простая анимация SVG.

HTML:

<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/><path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/></svg> 

CSS:

.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; 
    } 
} 

Fiddle

Проблема с этим SVG, оно работает только на настольных браузеров. Когда я тестирую его на мобильных устройствах (последние версии Chrome и Safari на iOS8) и собственный браузер Lollipop для Android, он не отображается.

Я уже пытаюсь добавить <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>, но он все еще не работает.

Что делать, чтобы этот SVG работал как на рабочем столе, так и на мобильном?

Answer 1

Для SVG на мобильных браузерах анимация SVG SMIL (так же, как элемент <animate>) кажется намного better supported, чем анимация css, которая выглядит ниже.

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

Пример кода: https://jsfiddle.net/rvbssfmd/3/

Вот учебник с CSS Tricks о SMIL анимации: https://css-tricks.com/guide-svg-animations-smil/