SVG-Linie Animation funktioniert nicht in IE

Ich benutze ein Karussell, das den Strich-dasharray animiert, aber es funktioniert nicht in IE.SVG-Linie Animation funktioniert nicht in IE

mein SVG:

<svg class="facts__svgs" viewBox="-10 -10 220 220" data-facts-stoke-svg=""> 
<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="651"></path> 
</svg>

Mein JS, die den Hub ändert:

function calculateDashArray(percentage) { 
    return (dashOffset * 2) - (segmentOfDashOffset * percentage) - 20; 
} 

function animateFactsSVG(percentage) { 
    elPath.style.strokeDasharray = calculateDashArray(percentage); 
}

In alles außer IE das funktioniert. In IE wird das Dasharray-Stil angewendet, aber die Svg ändert sich nicht.

Quelle

2016-04-01 MattClaff

Ihre Frage ist sehr vage. Was versuchst du zu erreichen? Ich habe den Code in einer Webseite hinzugefügt und angefangen, den Prozentsatz zu ändern, ich sehe keinen Unterschied. Was ist das DashOffset? Was ist SegmentOfDashOffset? –

Entschuldigung, ich mache jetzt einen Codepen, um mein Beispiel zu zeigen. – MattClaff

Hier ist mein Codepen Beispiel - http://codepen.io/mattclaffey/pen/PNJGRo – MattClaff

Ich habe Ihr Beispiel genommen und es in Internet Explorer und es hat nicht funktioniert. Dann begann ich mit den verschiedenen Eigenschaften zu spielen, um zu sehen, wie ich zu deinem gewünschten Effekt kommen konnte. Die einzige Möglichkeit, die Änderung im Dasharray grafisch darzustellen, bestand darin, das Attribut 'd' zurückzusetzen: elPath.setAttribute('d',elPath.getAttribute('d'));, wodurch das Dasharray wie gewünscht angezeigt wurde, aber die Animation zerstört wurde. Eine andere Möglichkeit, die Änderungen anzuzeigen, besteht darin, einen zweiten durch Kommas getrennten Parameter zu "dasharray" hinzuzufügen, wie "1008.58,100%", aber es würde auch nicht den gewünschten Effekt erzeugen.

Ich muss daraus schließen, dass Internet Explorer nicht gut mit einem Wert Schlaganfall-dasharray und Sie sollten wahrscheinlich nach einer anderen Lösung suchen.

Ich habe es tatsächlich mit einem Kreis statt einem Pfad so arbeiten:

<svg xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%" > 
    <circle cx="100" cy="100" r="100" stroke="green" stroke-width="1" fill="none" style="stroke-dasharray:228,628;transition: all .6s ease;" ></circle> 
</svg> 
<script> 
    var el=document.getElementsByTagName('circle')[0]; 
    var circumference=2*Math.PI*(+el.getAttribute('r')); 
    function animatePercentage(per) { 
     el.style.strokeDasharray=(per/100*circumference)+','+((1-per/100)*circumference); 
    } 
    setInterval(function() { 
     animatePercentage(70); 
    },2000); 
</script>

Keine Animation, though. Der Wert ändert sich sofort bei IE. Anscheinend funktioniert nicht in Internet Explorer, nur Edge (siehe SVG animation is not working on IE11)

den Code aktualisiert und gespeichert in einem CodePen hier: http://codepen.io/anon/pen/wGPwYq

Quelle

2016-04-02 07:22:15

Vielen Dank. Hast du ein Beispiel für ein Codepen für mich gemacht? – MattClaff

Ich denke, wenn es ohne Animation in IE funktioniert, dann wäre das in Ordnung, weil wir eine progressive Verbesserung Methoden folgen, so wäre dies eine Funktion, die in älteren Browsern funktioniert, aber es hat bessere Funktionalität in neueren Browsern. Ich testete diese Methode in Codepen und was ich versuchte zu erreichen, funktionierte nicht, wie Sie hier sehen können - http://codepen.io/mattclaffey/pen/xVPKrM – MattClaff

Aktualisierte den Code. Ich habe die Leerstelle als den Rest des Umfangs definiert. –

SVG-Linie Animation funktioniert nicht in IE

Antwort

Verwandte Themen