代码之家  ›  专栏  ›  技术社区  ›  fabricio

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

  •  1
  • fabricio  · 技术社区  · 12 年前

    我不知道我错过了什么。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>
    

    代码可以在jsfiddle中看到 http://jsfiddle.net/calamar888/WsxHs/

    非常感谢!

    附言1:不得不说,我已经在寻找答案了,但到目前为止,我还没有找到任何能解决我问题的方法。

    PS2:Firebug控制台不显示任何内容

    1 回复  |  直到 12 年前
        1
  •  5
  •   Robert Longson    12 年前

    IE9不支持动画,Firefox只在 <svg> 元素,因此您必须将加载的代码工作从根目录中移出 <svg> 要素