1

何が欠けているのかわからない。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/で見ることができます

本当にありがとう！

PS 1:私はすでに答えを探していると言わざるを得ませんが、これまでのところ私の問題を解決するものは何も見つかりませんでした.

PS 2: Firebug コンソールに何も表示されない

4

1 に答える 1

5

IE9 はアニメーションをサポートしておらず、Firefox は要素でのみ onload イベントを発生<svg>させるため、onload コード作業をルート<svg>要素から移動する必要があります。

于 2013-02-21T19:02:05.937 に答える