2011-10-21 8 views
1

私はSVGを持っており、グラデーションストップを左から右にアニメーション化したいと思います。 私は左から右にアニメーション化することができましたが、アニメーション化する方法はわかりません。ここでSVGアニメーショングラデーションストップ

は私のコードです:

<svg id="mySvg" width="700px" height="498px"> 
    <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-0.4998" y1="250" x2="700" y2="250"> 
      <stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.1"> 
       <animate attributeName="offset" begin="0s" dur="2s" from="0" to="1" repeatCount="indefinite" /> 
      </stop>    
     <stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0.1"/>          
    </linearGradient> 

    <path fill="url(#SVGID_1_)" d="M691.115,114.684c-9.084,0-16.193,7.1 ..."/> 
</svg> 

は私が左から右にとバックに常にグラデーションストップを動かすアニメーションを作成するために行うには何がありますか?

どうもありがとう、

ヴィンセント

+0

私はこれが唯一のみかんFirefoxで動作することがわかりました。タブを切り替えるか、オブジェクトをクリックして色を更新する必要があります。理由はわかりません.... –

答えて

4

代わりに属性からとに使用するのでは、値=使用してみてください '0; 1; 0'。 values属性を使用すると、四肢だけではなく、時間の経過と共に使用する値をいくつでも指定することができます。

時間で消化するのが難しいことができますが、仕様の関連する章では、アニメーションのために知っておくと便利である地上の多くをカバー:http://www.w3.org/TR/SVG/animate.html

+0

ありがとう、Robin :) – Vinzcent