Анимация SVG-градиента - PullRequest
Новая
       19

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

6 голосов
/ 21 декабря 2011

Я хотел бы создать 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 градиенты.

Ответы [ 2 ]

6 голосов
/ 03 апреля 2014

Вот пример , который работает в Firefox и Chrome:

Атрибут values, который предоставляется в спецификации здесь , используется в этом примере. 

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

6 голосов
/ 21 декабря 2011

Вам просто нужен период времени для анимации. Например, добавьте 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>
...