Анимация градиента SVG

Question

Я хотел бы создать градиент SVG, который меняется со временем.

В этом примере кода, я хотел бы, чтобы сформировать эллипс, градиент красного цвета с желтой полосой, которая перемещается с запада на восток в течение долгого времени (создавая эффект мерцание):

<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> 

Это Безразлично» пока работаю, но я не уверен, что это потому, что я делаю это неправильно, или это не эффект, который я могу достичь с помощью градиентов SVG.

Answer 1

Вам просто нужен период времени для анимации. Добавьте dur="5s", например, в качестве атрибута элемента animate.

<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

Вот example, который работает на Firefox и Chrome: атрибут

Значения, которые приведены в спецификации 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"/>