我正在使用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>
MY Js重复：
function func_call(){
setTimeout(function(){document.getElementById("svg_anim").setCurrentTime(0);
}
},2000);
}
此代码在Chrome，Firefox中运行良好，但在IE9中却没有。
我的问题：
有没有更好的方法从头开始重新启动动画。 或者我的代码可以在IE9中运行。
需要帮助。这已经耗费了我几天的时间。
答案 0 :(得分：0)
您正在使用SMIL（声明性）动画，Internet Explorer不支持该动画。据我所知，微软没有计划支持它。从这个页面，
“基于脚本的动画打开了简单和复杂的大门 动画可能性。因此，以及其他原因（例如 作为CSS动画），IE9不支持声明性动画。“
Microsoft真的希望您使用基于脚本的动画。因此，如果您希望SVG在所有当前浏览器中制作动画，则需要使用Javascript进行操作。或者，正如Microsoft暗示的那样，您可以使用CSS动画。在我看来，CSS动画将是您示例中简单动画的最佳选择。
您可以使用FakeSmile库向IE添加动画支持