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

В данном примере показаны четыре радиальных градиента (radialGradient). У градиентов анимированы атрибуты offset, fx и fy. Окружности (circle), залитые градиентами, перемещаются. Для них, кроме того, задан обработчик щелчка (myclick(evt)), который изменяет радиус окружности в некоторых пределах.

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="150" height="450"
   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="#0080a0">
		<animate attributeName="offset" 
         		from="0%" to="100%" dur="12s"
         		repeatCount="indefinite"/>
       </stop>
	 <animate attributeName="fx" 
         		from="20%" to="100%" dur="10s"
         		repeatCount="indefinite"/>
       <animate attributeName="fy" 
         		from="25%" to="100%" dur="10s"
         		repeatCount="indefinite"/>
    </radialGradient>

    <radialGradient id="MyGradient2"
         fx="30%" fy="25%" >
       <stop offset="0" stop-color="#ffffff"/>
       <stop offset="100%" stop-color="#009000">
       </stop>
    </radialGradient>

    <radialGradient id="MyGradient3"
         fx="25%" fy="25%" >
       <stop offset="0" stop-color="#ffffff">
		<animate attributeName="offset" 
         		from="0%" to="100%" dur="5s"
         		repeatCount="indefinite"/>
	 </stop>
       <stop offset="100%" stop-color="#ff0080">
       </stop>
    </radialGradient>
</defs>
<circle id="c1" onclick="myclick(evt)"
  cx="50" cy="50" r="31"  fill="url(#MyGradient1)" fill-opacity="0.8">
  <animateMotion path="M0 0 L50 300 60 120 0 0"
       repeatCount="indefinite" dur="20s"/>
</circle>

<circle id="c2" onclick="myclick(evt)"
  cx="40" cy="80" r="21"  fill="url(#MyGradient2)" fill-opacity="0.9">
  <animateMotion path="M5 50 L50 300 60 100 70 120 5 50"
       repeatCount="indefinite" dur="15s"/>
</circle>
<circle id="c3" onclick="myclick(evt)"
  cx="65" cy="110" r="41"  fill="url(#MyGradient1)" fill-opacity="0.7">
  <animateMotion path="M25 250 L20 0 25 250"
       repeatCount="indefinite" dur="25s"/>
</circle>
<circle id="c4" onclick="myclick(evt)"
  cx="90" cy="45" r="41"  fill="url(#MyGradient3)" fill-opacity="0.8">
  <animateMotion path="M10 300 L20 0 10 300"
       repeatCount="indefinite" dur="40s"/>
</circle>

<script type="text/javascript">
<![CDATA[
 var d=4;
 function myclick(evt){ // изменение радиуса 
  var e=evt.srcElement; // для IE
  if (!e) e=evt.target; // для остальных браузеров
  var xid=e.id; 
  var x=document.getElementById(xid);
  var curattr=x.getAttribute("r");
  if (parseInt(curattr)>50) d=-4;
  if (parseInt(curattr)<7) d=4;
  var y=parseInt(curattr)+d; 
  x.setAttribute("r",y);
 }
]]>
</script>
</svg>