svg 动画在 ie 中不起作用

Question

我无法让这个动画在 ie 中工作：

https://jsfiddle.net/p3vnqsy9/

<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 原生。有一个 polyfill 虽然叫做 fakesmile。

无论如何，路径在动画中是无效的。逗号只能用于分隔数字，因此 M 0,0, C 与 0 和 C 之间的逗号无效。这会阻止动画在 Firefox 中运行。