SVG и CSS3 Анимации, не работающие в IE и Safari

-1

У меня есть этот код для анимации, использующий HTML5, CSS3 Анимации и SVG line. Он работает только в Chrome, Opera и Firefox и не работает в IE и Safari. Любое решение?SVG и CSS3 Анимации, не работающие в IE и Safari

Вот код:

.line { 
 
    width: 65%; 
 
    margin: 0 auto; 
 
} 
 
#svg path.path { 
 
    stroke-dasharray: 3000; 
 
    stroke-dashoffset: 4000; 
 
    stroke-width: 2; 
 
    -webkit-animation: lines 5s linear forwards; 
 
    -moz-animation: lines 5s linear forwards; 
 
    -ms-animation: lines 5s linear forwards; 
 
    -0-animation: lines 5s linear forwards; 
 
    animation: lines 5s linear forwards; 
 
} 
 
@keyframes lines { 
 
    form { 
 
    stroke-dashoffset: 4000; 
 
    } 
 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 
@-webkit-keyframes lines { 
 
    form { 
 
    stroke-dashoffset: 4000; 
 
    } 
 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 
@-moz-keyframes lines { 
 
    form { 
 
    stroke-dashoffset: 4000; 
 
    } 
 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 
@-ms-keyframes lines { 
 
    form { 
 
    stroke-dashoffset: 4000; 
 
    } 
 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 
@-o-keyframes lines { 
 
    form { 
 
    stroke-dashoffset: 4000; 
 
    } 
 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
}

<div class="line"> 
 
    <svg id="svg" stroke="#000" stroke-miterlimit="1000" id="Layer_1" style="opacity:1;" x="0px" y="0px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve"> 
 
    <path class="path" fill="#fff" stroke="#000" stroke-miterlimit="1000" stroke-dasharray="11.9901,11.9901" d="M52.652,248.08 
 
     c30.97,37.245,74.957,63.396,122.172,75.244c53.056,13.313,109.816,9.162,161.756-7.968 
 
     c42.308-13.953,83.007-37.533,108.174-74.156c4.655-6.774,8.818-14.153,10.027-22.271c2.24-15.044-6.187-29.969-17.51-40.177 
 
     c-28.483-25.679-73.116-26.422-108.534-11.588c-54.196,22.698-92.323,81.422-86.252,139.649 
 
     c6.07,58.228,59.091,109.265,117.886,109.022c20.716-0.085,41.065-5.884,60.092-14.042c18.307-7.85,35.789-18.023,50.322-31.606 
 
     c14.503-13.555,25.718-30.139,37.837-45.845c17.476-22.649,37.883-44.311,64.254-55.552c26.37-11.241,59.879-9.795,80.612,9.943 
 
     c30.67,29.196,23.317,84.899,56.145,111.668c29.1,23.729,74.437,10.683,102.618-14.121c32.31-28.438,51.374-68.875,65.118-109.573 
 
     c12.464-36.907,21.327-75.103,35.836-111.202" /> 
 
    </svg> 
 
</div>

See the code in "Code Pen"

Я хочу, чтобы это исправить, сделав его работу в IE и Safari. Пожалуйста, , если возможно только в HTML5, CSS и SVG.

источник

2015-06-28 Mohammed Moustafa

@ aliasm2k Почему вы бы принять HTML5-холст Out? Пожалуйста, поделитесь своим мнением? –

Я тоже взял бирку. Нет никакого реального упоминания о Canvas HTML5, вы не использовали JS-код, используя API Canvas, заявив, что «только HTML5» не указывает автоматически Canvas. Если вы хотите, чтобы ваше решение находилось в Canvas, тогда четко сформулируйте его в самом вопросе и предоставьте JS-код того, что вы пробовали самостоятельно. – Xufox

Благодарим за редактирование моих тегов. Да, вы правы, но как насчет того, если в моем коде нет решения, поэтому я сказал, если это возможно? (это может быть в холсте HTML5) –

Mozilla Devloper Network - SVG Animation - Browser Compatibility говорит

Internet Explorer
Не поддерживается

Затем используйте FakeSMIL

см это FakeSmile with IE9

См этот http://jsfiddle.net/whyoz/c3wb5sbr/

function registerAnimation(anim) { 
    var targets = getTargets(anim); 
    var elAnimators = new Array(); 
    for(var i=0; i<targets.length ;i++) { 
     var target = targets[i]; 
     var animator = new Animator(anim, target, i); 
     animators.push(animator); 
     elAnimators[i] = animator; 
    } 
    anim.animators = elAnimators; 
    var id = anim.getAttribute("id"); 
    if (id) 
     id2anim[id] = anim; 
    for(var i=0; i<elAnimators.length ;i++) 
     elAnimators[i].register(); 
} 

var svg = document.getElementsByTagName('svg')[0]; 
....... 
var animation = document.createElementNS(
    "http://www.w3.org/2000/svg", "animate"); 
....... 
....... 
registerAnimation(animation); 
animation.beginElement();

Что может принести анимации для SVG в IE

См MSDNhttps://msdn.microsoft.com/en-us/library/gg193979(v=vs.85).aspx

Примерhttp://samples.msdn.microsoft.com/workshop/samples/svg/svgAnimation/basic/06seventeenGearsWith1Button.html

источник

2015-06-28 09:36:49