无法使SVG动画与ie9和firefox一起工作

我不知道我在想什么。 SVG动画在铬中显示ok，但尽管我在ie9和Firefox中看到图像，但看不到动画。无法使SVG动画与ie9和firefox一起工作

我已出口SVG文件从Corel绘图X5：

<?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>

的代码可以在的jsfiddle http://jsfiddle.net/calamar888/WsxHs/

由于可以看到这么多！

PS 1：不得不说我已经找了一个答案，但我找不到任何解决我的问题到目前为止。

PS 2：萤火虫控制台不显示任何

来源

2013-02-21 fabricio

IE9不支持动画和Firefox只触发对<svg>元素的onload事件，所以你必须移动的onload代码工作关根<svg>元素。

来源

2013-02-21 19:02:05

感谢您的回答！我想我会尝试一下canvas，因为我真的需要在几乎所有浏览器中都能看到动画 – fabricio 2013-02-22 17:52:56

有一个名为FakeSmile的库，它可以让你的动画在IE9上运行。 – 2013-02-22 21:39:46

我还没有尝试过FakeSmile，但是我正在看一个不工作的例子，至少对我来说，在ie9中。 [示例]（http://www.codedread.com/menu.svg）。你对raphaelJs有什么看法？昨天我试了HTML5画布，但调整画布和路径看起来真的很烦人，这就是为什么我想要SVG – fabricio 2013-02-25 15:08:07

无法使SVG动画与ie9和firefox一起工作

回答

相关问题