无法使用 ie9 和 firefox 制作 SVG 动画答案

【问题标题】：Can't make SVG animation work with ie9 and firefox无法使用 ie9 和 firefox 制作 SVG 动画
【发布时间】：2013-02-07 05:41:33
【问题描述】：

我不知道我错过了什么。 SVG 动画在 chrome 中显示正常，但虽然我在 ie9 和 firefox 中看到了图像，但我看不到动画。

我已经从 Corel Draw x5 导出了 svg 文件：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" height="100%" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 25.4 2.64582"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
   <![CDATA[
    .str0 {stroke:#898989;stroke-width:0.05}
    .fil0 {fill:none}
   ]]>
  </style>
 </defs>
 <g id="Capa_x0020_1">
    <path class="fil0 str0" d="M0.10261 2.04656c0.08134,0 0.25217...
    />

然后我添加了动画：

<path class="fil0 str0" d="M0.10261 2.04656c0.08134,0 0.25217...
    stroke-dasharray="">
  <animate id="first" attributeName="stroke-dashoffset" from="" to="0" dur="10s" begin="0s"
  onload="var length = parentNode.getTotalLength();
                   parentNode.setAttribute('stroke-dasharray',length+','+length);
                   this.setAttribute('from',length)" />
  </path>

代码可见jsfiddlehttp://jsfiddle.net/calamar888/WsxHs/

非常感谢！

PS 1：不得不说我已经在寻找答案，但到目前为止我找不到任何可以解决我问题的东西。

PS 2：Firebug 控制台不显示任何内容

【问题讨论】：

标签： internet-explorer firefox svg svg-animate

【解决方案1】：

IE9 不支持动画，Firefox 仅在 <svg> 元素上触发 onload 事件，因此您必须将 onload 代码工作移出根 <svg> 元素。

【讨论】：

感谢您的回答！我想我要试试画布，因为我真的需要动画在几乎所有浏览器中都能正常显示
有一个名为 FakeSmile 的库，可以让您的动画在 IE9 上运行。
我还没有尝试过 FakeSmile，但我正在看一个在 ie9 中不起作用的例子，至少对我来说是这样。 example。你觉得 raphaelJs 怎么样？昨天我尝试了 html5 画布，但调整画布和路径的大小对我来说真的很烦人，这就是我想要 SVG 的原因
该站点使用的 FakeSmile 版本太旧，无法支持 IE9。 leunen.me/fakesmile/smil.user.js 应该可以工作。