Question

我无法在ie：

中使用此动画

<div style="background: red">
    <svg style="padding: 10%" width="80%" xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 960 960" enable-background="new 0 0 960 960" id="design-shapes">                               
                            <path fill="none" stroke="#FFFFFF" stroke-width="40" stroke-linejoin="round" stroke-linecap="round"
                            d="M 0,480 C 0,750, 210,960 480,960 C 750,960, 960,750 960,480 C 960,210 750,0 480,0 C 210,0 0,210 0,480">
                                <animate dur="9000ms" repeatCount="indefinite" attributeType = "XML"
                                attributeName="d"
                                    values="M 0,480 C 0,750, 210,960 480,960 C 750,960, 960,750 960,480 C 960,210 750,0 480,0 C 210,0 0,210 0,480;
                                    M 0,480 C 0,750, 210,960 480,960 C 750,960, 960,750 960,480 C 960,210 750,0 480,0 C 210,0 0,210 0,480;
                                    M 0,480 C 0,750, 210,960 480,960 C 750,960, 960,750 960,480 C 960,210 750,0 480,0 C 210,0 0,210 0,480;
                                    M 480,0 C 480,0 0,840 0,840 C 0,840 480,840 480,840 C 480,840 960,840 960,840 C 960,840 480,0 480,0;
                                    M 480,0 C 480,0 0,840 0,840 C 0,840 480,840 480,840 C 480,840 960,840 960,840 C 960,840 480,0 480,0;
                                    M 480,0 C 480,0 0,840 0,840 C 0,840 480,840 480,840 C 480,840 960,840 960,840 C 960,840 480,0 480,0;
                                    M 0,0, C 0,0 0,960 0,960 C 0,960 960,960 960,960 C 960,960 960,0 960,0 C 960,0 0,0 0,0;
                                    M 0,0, C 0,0 0,960 0,960 C 0,960 960,960 960,960 C 960,960 960,0 960,0 C 960,0 0,0 0,0;
                                    M 0,0, C 0,0 0,960 0,960 C 0,960 960,960 960,960 C 960,960 960,0 960,0 C 960,0 0,0 0,0;
                                    M 0,480 C 0,750, 210,960 480,960 C 750,960, 960,750 960,480 C 960,210 750,0 480,0 C 210,0 0,210 0,480" /></path>
        </svg>
</div>

其他地方工作正常，我错过了一些信息吗？

修改

更新了jsfiddle以包含fakesmile资源，但它仍然不起作用：

https://jsfiddle.net/p3vnqsy9/2/

编辑2

使用正确的语法更新了jsfiddle以允许动画在Firefox中运行：

https://jsfiddle.net/p3vnqsy9/3/

编辑3

我无法让fakesmil在IE中工作，所以反而选择了svg-morpheus库。如果有人知道其他解决方案，请告诉我......

Answer 1

IE does not support SMIL原生。尽管它被称为fakesmile，但它有一个polyfill。

对于它的价值，动画中的路径无效。逗号只允许分开数字，因此{0}与0之间的逗号无效M 0,0, C。这可以防止动画在Firefox中运行。

svg动画不工作在ie

1 个答案: