SVGグラデーションのアニメーション

Question

時間の経過とともに変化するSVGグラデーションを生成したいと思います。このコード例では

、Iは、その勾配時間にわたって西から東に移動イエローストライプ（ラメ効果を作成する）と赤色である楕円を生成したい：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <defs> 
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> 
     <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
     <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" > 
     <animate 
      attributeName="offset" 
      from="0%" 
      to="100%" 
      repeatCount="indefinite"/> 
     </stop> 
     <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
    </linearGradient> 
    </defs> 
    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> 
</svg> 

これは」doesnの私はそれが間違っているか、SVGグラデーションでは達成できない効果ではないかどうかはわかりません。

Answer 1

アニメーションの期間が必要です。例えば、要素の属性としてdur="5s"を追加します。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
    <defs> 
 
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> 
 
     <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
 
     <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" > 
 
     <animate 
 
      attributeName="offset" 
 
      from="0%" 
 
      to="100%" 
 
      dur="5s" 
 
      repeatCount="indefinite"/> 
 
     </stop> 
 
     <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
 
    </linearGradient> 
 
    </defs> 
 
    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> 
 
</svg>

Answer 2

ここでは、FirefoxとChromeで動作しますexampleです：

値はそれはスペックhereで提供される属性この例で使用されます。うまく

<linearGradient id="myG"> 
<stop offset="0" stop-color="#f15361"> 
</stop> 
<stop offset=".25" stop-color="#fbaf4a"> 
<animate attributeName="offset" dur="5s" values="0;1;0" 
    repeatCount="indefinite" /> 
</stop> 
<stop offset="1" stop-color="#f15361"/>