Градиенты в SVG-графике

Здесь представлено несколько примеров создания градиентов, в том числе и анимированных (подробнее об анимации).

• В данном примере показаны два радиальных (radialGradient) и один линейный (linearGradient) градиенты. Центр радиального градиента задается атрибутами fx и fy. Первый вариант обычный (статический), а во втором варианте заливка градиентом анимирована (animate attributeName="offset"). Анимация работает в Firefox, но не в Chrome, Opera (а в ранних версиях работала) и IE. Ниже приведен SVG-код для анимационного варианта. Если из него удалить теги <animate>, то получится статический вариант.

  SVG-код:

  <?xml version="1.0" encoding="UTF-8"?>
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <svg xmlns="http://www.w3.org/2000/svg" width="200" height="400"
     xmlns:xlink="http://www.w3.org/1999/xlink"
  >
  <title>Градиенты</title>
  <defs>
      <radialGradient id="MyGradient1"
           fx="20%" fy="25%" >
         <stop offset="0" stop-color="#f0ffff"/>
         <stop offset="100%" stop-color="#00a0a0">
           <animate attributeName="offset" 
             from="0%" to="100%" dur="10s"
             repeatCount="indefinite"/>
         </stop>
      </radialGradient>
      <radialGradient id="MyGradient2"
           fx="25%" fy="50%" >
         <stop offset="0" stop-color="#ffffff"/>
         <stop offset="100%" stop-color="#ff00ff">
           <animate attributeName="offset" 
             from="0%" to="100%" dur="5s"
             repeatCount="indefinite"/>
         </stop>
      </radialGradient>
  
      <linearGradient id="MyGradient3"
           x1="0%" y1="0%" x2="100%" y2="0%">
         <stop offset="0" style="stop-color:#ffffff"/>
         <stop offset="100%" style="stop-color:#008000">
            <animate attributeName="offset" 
             from="0%" to="100%" dur="3s"
             repeatCount="indefinite"/>
         </stop>
      </linearGradient>
      
  </defs>
  <circle cx="60" cy="60" r="50"  fill="url(#MyGradient1)" fill-opacity="0.5"/>
  <circle cx="100" cy="100" r="35"  fill="url(#MyGradient2)" fill-opacity="0.5"/>
  <rect x="10" y="150" width="200" height="60" fill="url(#MyGradient3)" />
  </svg>
  

• Еще пример >...