2

私たちのアプリケーションにあるいくつかの古い SVG グラフィックスをサポートしています。四角形の塗りつぶしの色をアニメーション化する際に問題が発生しています。他の誰かが同じ問題を見たことがあるかどうか疑問に思っています。

rec に animate 要素を設定すると、最終的に次のようになります。

<svg id="svgEle" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect id="rect"
  width="100" height="100" 
  style="fill:#008000; stroke:#000000;">
    <animate id="animate" fill="freeze" 
      attributeName="fill" attributeType="CSS" 
      begin="indefinite" dur="1s"></animate>
  </rect>      
</svg>

次に、Web サービスの結果の値に応じて、四角形の色を変更し、色の変化をアニメーション化しようとします。現在、beginElement 関数をサポートするネイティブ SVG レンダーは Chrome だけのようです。アニメーションは最初の実行では完全に機能しますが、アニメーションを更新しようとする後続の試みはすべて期待どおりに動作しません。それらは常に最初のアニメーションの塗りつぶしの色に戻っているようです。

私が何を意味するかを示すために、次の例を作成しました: http://jsfiddle.net/ssawchenko/ARXbs/

Chrome では、ボタンをクリックすると、四角形はアニメーションを介して 4 色すべてを循環する必要がありますが、そうではありません。IE9 ではアニメーションがサポートされていないため、塗りつぶしの色を直接変更するだけです。

塗りつぶしを設定するだけでIE9で問題ありませんが、Chromeでは色が完全に壊れています。これがバグなのか、それとも回避策があるのか​​、誰にもわかりませんか?

ありがとう！

4

1 に答える 1

1

このバグはSVG Editにも見られます。

<animate attributeName="opacity" begin="indefinite" dur="1" fill="freeze">
</animate>

長方形を重ねて描画すると、完全に不透明なはずの長方形が半透明に見えることがわかります。Chrome Canary はこの動作を示さないことがわかったので、次のリリースで修正される可能性があります。

この提出されたバグが関連していると思います。

于 2012-06-21T23:12:00.830 に答える