jquery - SVG 动画在 IE9 中不起作用

Question

我正在使用 svg，我想使用 animate 标签为它设置动画，如下面的代码所示:

<svg id="svg_anim" width="100%" height="500" viewBox="0 0 750 160">
    <g id="layer1" transform="translate(0,-892.9134)">
        <g id="g4610" transform="matrix(0.78599195,0,0,0.78599195,25.527464,548.09428)">
            <g id="second_path" class="circle_hover">
                <defs>
                    <linearGradient id="fill_anim2">
                        <stop offset="1" stop-color="#71D0E8">
                            <animate id="second_arrow_fill1" dur="1s" attributeName="offset" begin="first_circle_anim2.end" fill="freeze" from="0" to="1"></animate>
                        </stop>
                        <stop offset="1" stop-color="#ded9d5">
                            <animate id="second_arrow_fill2" dur="1s" attributeName="offset" begin="first_circle_anim2.end" fill="freeze" from="0" to="1"></animate>
                        </stop>
                    </linearGradient>
                </defs>
                <path style="opacity:1;fill:url(#fill_anim2);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:1.32999992;stroke-opacity:1" d="m 266.24609,462.17383 c -36.92375,-3.57967 -65.48691,13.85595 -64.78711,41.50917 0,0 -0.51423,51.85493 -0.50508,74.24685 0.01,23.45457 -27.31442,22.80234 -47.3058,23.13426 1.10753,2.14916 2.88782,5.74543 2.89096,8.18003 -9.6e-4,3.99327 -1.55391,7.81901 -4.31054,10.61914 3.27885,-1.0397 75.01148,3.93253 71.9746,-42.69184 -1.31839,-20.24093 0,-72.46832 0,-72.46832 -0.20538,-18.15802 14.03939,-23.13357 41.84376,-25.10351 -1.71604,-2.50694 -2.64034,-5.50017 -2.64649,-8.57031 0.006,-3.19035 1.00362,-6.29442 2.8457,-8.85547 z" transform="translate(0.5714286,1.42857)" id="path4573"></path>
                <ellipse ry="14.89975" rx="14.426742" cy="472.45868" cx="278.39835" id="ellipse4579" style="opacity:1;fill:#fb787f;fill-opacity:1;fill-rule:nonzero;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1">
                    <animate id="second_circle_anim2" attributeName="fill" from="#ffa98f" to="#0066B3" begin="second_arrow_fill2.end" dur="1s" fill="freeze" repeatCount="1"></animate>
                </ellipse>
                <text class="head_content" x="250" y="450">Sample
                    <animate id="text_anim3" attributeName="fill" from="#F67A83" to="#4F3CAA" begin="second_arrow_fill2.end" dur="1s" fill="freeze" repeatCount="1"></animate>
                </text>
                <text class="head_content" x="235" y="385">SAmple
                    <animate id="text_anim4" attributeName="fill" from="#F67A83" to="#4F3CAA" begin="second_arrow_fill2.end" dur="1s" fill="freeze" repeatCount="1"></animate>
                </text>
                <text class="sub_content" x="175" y="405">Sample Text
                    <animate id="text_anim5" attributeName="fill" from="#0D5982" to="#684F28" begin="second_arrow_fill2.end" dur="1s" fill="freeze" repeatCount="1"></animate>
                    <tspan x="225" y="425" class="sub_content">Sample Text
                        <animate id="text_anim6" onend="func_call()" attributeName="fill" from="#0D5982" to="#684F28" begin="second_arrow_fill2.end" dur="1s" fill="freeze" repeatCount="1"></animate>
                    </tspan>
                </text>
            </g>
            <g id="first_path" class="circle_hover">
                <defs>
                    <linearGradient id="fill_anim1">
                        <stop offset="1" stop-color="#71D0E8">
                            <animate id="first_arrow_fill1" dur="1s" attributeName="offset" begin="1s;text_anim6.end+2s" fill="freeze" from="0" to="1"></animate>
                        </stop>
                        <stop offset="1" stop-color="#ded9d5">
                            <animate id="first_arrow_fill2" dur="1s" attributeName="offset" begin="1s;text_anim6.end+2s" fill="freeze" from="0" to="1"></animate>
                        </stop>
                    </linearGradient>
                </defs>
                <path style="opacity:1;fill:url(#fill_anim1);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1" d="m 18.929688,529.44141 c 1.140051,2.17164 1.739409,4.60197 1.74414,7.07226 -0.0033,2.41521 -0.575072,4.79339 -1.666016,6.92969 l 36.876954,0 c 17.101683,0 11.124297,14.78094 13.525192,34.92207 7.304679,27.32129 35.935342,38.13518 62.612922,41.73111 -1.5457,-2.42739 -4.33484,-7.94712 -4.33733,-10.8524 0.005,-3.11453 0.90166,-5.74434 2.66254,-8.27277 -23.30774,-1.1068 -29.8766,-7.34118 -39.33413,-22.29658 -4.829034,-11.35821 5.68082,-49.23338 -28.703413,-49.23338 z" transform="translate(0.5714286,1.42857)" id="path4471"></path>
                <ellipse style="opacity:1;fill:#ffa98f;fill-opacity:1;fill-rule:nonzero;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1" id="ellipse4571" cx="142.68405" cy="610.67297" rx="14.426742" ry="14.89975">
                    <animate id="first_circle_anim2" attributeName="fill" from="#ffa98f" to="#0066B3" begin="first_arrow_fill2.end" dur="1s" fill="freeze" repeatCount="1"></animate>
                </ellipse>
                <text class="head_content" x="115" y="650">Q1 2017
                    <animate id="first_text_anim1" attributeName="fill" from="#F67A83" to="#4F3CAA" begin="first_arrow_fill2.end" dur="1s" fill="freeze" repeatCount="1"></animate>
                </text>
                <text class="head_content" x="108" y="678">sample
                    <animate id="first_text_anim2" attributeName="fill" from="#F67A83" to="#4F3CAA" begin="first_arrow_fill2.end" dur="1s" fill="freeze" repeatCount="1"></animate>
                </text>
                <text class="sub_content" x="60" y="700">SAmple TExt
                    <animate id="first_text_anim3" attributeName="fill" from="#0D5982" to="#684F28" begin="first_arrow_fill2.end" dur="1s" fill="freeze" repeatCount="1"></animate>
                </text>
            </g>
        </g>
    </g>
</svg>

我的 Js for repeat :

function func_call(){
    setTimeout(function(){document.getElementById("svg_anim").setCurrentTime(0);
        }
    },2000);
}

此代码在 Chrome、firefox 中运行良好，但在 IE9 中运行不正常。

我的问题:

有没有更好的方法从头开始重新启动动画。或者我的代码可以在 IE9 中工作。

需要帮助。这几天一直在耗尽我的时间。

Answer 1

IE 的解决方法 - 使用 Fake Smile

IE9 缺少动画支持，但通过脚本支持程序化动画。

因此，Fake Smile 可以在这种情况下提供帮助。