Question

我正在使用一个动画片来动画中风-dasharray，但它在IE中不起作用。

我的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>

我的JS改变了中风：

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

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

除了IE之外，这一切都有效。在IE中，应用了dasharray样式，但svg没有改变。

Answer 1

我已经将您的示例放在Internet Explorer中并且无效。然后我开始玩各种属性，看看我如何达到你想要的效果。我在dasharray中以图形方式进行更改的唯一方法是重置'd'属性：elPath.setAttribute('d',elPath.getAttribute('d'));使得dasharray按需要显示，但是会破坏动画。另一种显示更改的方法是向dasharray添加第二个逗号分隔参数，如'1008.58,100％'，但它也不会创建所需的效果。

我必须得出结论，Internet Explorer不能很好地处理一个值stroke-dasharray，你应该寻找另一个解决方案。

我实际上是用圆圈而不是像这样的路径：

<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>

但是，没有动画。 IE上的值立即发生变化。显然这不适用于Internet Explorer，只适用于Edge（请参阅SVG animation is not working on IE11）

更新了代码并将其保存在CodePen中：http://codepen.io/anon/pen/wGPwYq

SVG线动画在IE中不起作用

1 个答案: