Анимация SVG-графики

Анимировать SVG-графику можно с помощью скриптов на JavaScript. Вместе с тем, в SVG имеются собственные весьма развитые и удобные средства анимации. В SVG-коде анимация определяется специальными тегами и атрибутами. Таким образом, вы просто указываете, что и каким образом следует анимировать, не занимаясь организацией вычислений значений параметров анимируемого объекта, которые он должен принять в следующий момент времени. Для многих, видимо, это проще, чем писать скрипт, используя методы setInterval() и/или setTimeout().
Примеры анимации SVG-графики с помощью скрипта на JavaScript я демонстрировал при рассмотрении трансформаций SVG

Примечание

Примеры

• В данном примере анимируется линейный градиент (linearGradient), на фоне которого перемещаются (animateMotion) две картинки из gif-файла с прозрачным фоном. Траектория задана кубической кривой Безье (path). Изображения поворачиваются сообразно с траекторией (rotate="auto"). Однако анимация градиентов не поддерживается Chrome последних версий (я заметил это только в версии 21).

  SVG-код:

  <svg xmlns="http://www.w3.org/2000/svg" width="350" height="250"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Анимация</title>
  <defs>
   <linearGradient id="MyGradient"
       x1="0%" y1="0%" x2="10%" y2="100%">
   <stop offset="0" style="stop-color:white;"/>
   <stop offset="100%" style="stop-color:#0080ff;">
   <animate attributeName="offset" 
           from="0%" to="100%" dur="12s"
           repeatCount="indefinite"/>
   </stop>
   </linearGradient>
  </defs>
  
  <rect x="0" y="0" width="350" height="250"
       fill="url(#MyGradient)"/>
  <image x="-5" y="-10" width="53" height="33"
       xlink:href="../airplane.gif">
    <animateMotion path="M-10 250 C-20 0 340 0 330 200" dur="12s"
       rotate="auto" repeatCount="indefinite"/>
  </image>
  <image x="-5" y="-10" width="40" height="26"
       xlink:href="../airplane.gif">
    <animateMotion path="M-10 150 C-20 0 350 0 150 220" dur="12s"
       rotate="auto" repeatCount="indefinite"/>
  </image>
  </svg>
  

• В следующем примере перемещается (animateMotion) эллипс, цвет которого изменяется (animateColor). Текстовая строка расположена вдоль некоторой кривой (path) и также перемещается. Оба объекта реагируют на щелчок мышью, который обрабатывается скриптом на JavaScript. Текст изменяет цвет, а эллипс — увеличивает размеры

  SVG-код:

  <svg xmlns="http://www.w3.org/2000/svg" width="350" height="380"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Анимация</title>
  <defs>
       <!--Траектория текста-->
       <path id="myPath" d="M25,75 C25,15 175,15 175,75"/> 
  </defs>
  
  <ellipse id="myellipse" cx="150" cy="100" rx="25" ry="20"
       fill="#00ff00" onclick="ellipseclick()">
    <animateColor attributeName="fill"
        from="#00ffff" to="#ff0000" dur="5s"
        repeatCount="indefinite"/>
    <animateMotion path="M-10 150 C-20 10 200 350 120 100" dur="10s"
       rotate="auto" repeatCount="indefinite"/>
  </ellipse>
  <text id="mytext" font-size="20pt" fill="red" text-anchor="middle"
       onclick="textclick()">
    <textPath xlink:href="#myPath" startOffset="50%">
      Анимация SVG
    </textPath>
    <animateMotion path="M-10 250 C-20 0 340 0 50 200" dur="5s"
      rotate="auto" repeatCount="indefinite" />
  </text>
  <text x="10" y="375">Движущиеся объекты чувствительны к щелчку</text>
  <script type="text/javascript">
  <![CDATA[
  /* Обработчики щелчка */
   function textclick(){ //
    var x=document.getElementById("mytext");
    var curattr=x.getAttribute("fill");
    if (curattr=="red") {
       x.setAttribute("fill","blue")
    } else {
       x.setAttribute("fill","red")
    }
   }
  
   function ellipseclick(){ // изменение размеров эллипса
    var x=document.getElementById("myellipse");
    var curattr=x.getAttribute("rx");
    var y=parseInt(curattr)+5; 
    x.setAttribute("rx",y);
    curattr=x.getAttribute("ry");
    y=parseInt(curattr)+5; 
    x.setAttribute("ry",y)
   }
  ]]>
  </script>
  </svg>
  
  

• Движение на карте >...
• Примеры анимации градиентов >...