---
title: <animateMotion>
slug: Web/SVG/Элемент/animateMotion
tags:
  - SVG
  - svg анимация
  - Элемент
translation_of: Web/SVG/Element/animateMotion
---
<div>{{SVGRef}}</div>

<p>Элемент <strong><code>&lt;animateMotion&gt;</code></strong> вызывает перемещение ссылочного элемента вдоль пути движения.</p>

<h2 id="Контекст_использования">Контекст использования</h2>

<p>{{svginfo}}</p>

<h2 id="Атрибуты">Атрибуты</h2>

<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3>

<ul>
 <li><a href="/ru/docs/SVG/Attribute#Conditional_processing_attributes" title="en/SVG/Attribute#ConditionalProccessing">Условные атрибуты обработки</a> » </li>
 <li><a href="/ru/docs/SVG/Attribute#Core_attributes" title="en/SVG/Attribute#Core">Основные атрибуты</a> » </li>
 <li><a href="/ru/docs/SVG/Attribute#Animation_event_attributes" title="en/SVG/Attribute#AnimationEvent">Атрибуты события анимации</a> » </li>
 <li><a href="/ru/docs/SVG/Attribute#XLink_attributes" title="en/SVG/Attribute#XLink">Атрибуты Xlink</a> » </li>
 <li><a href="/ru/docs/SVG/Attribute#Animation_timing_attributes" title="en/SVG/Attribute#AnimationTiming">Атрибуты времени анимации</a> » </li>
 <li><a href="/ru/docs/SVG/Attribute#Animation_value_attributes" title="en/SVG/Attribute#AnimationValue">Величина атрибутов анимации</a> » </li>
 <li><a href="/ru/docs/SVG/Attribute#Animation_addition_attributes" title="en/SVG/Attribute#AnimationAddition">Атрибуты добавления анимации</a> » </li>
 <li>{{SVGAttr("externalResourcesRequired")}}</li>
</ul>

<h3 id="Собственные_атрибуты">Собственные атрибуты</h3>

<ul>
 <li>{{SVGAttr("calcMode")}}</li>
 <li>{{SVGAttr("path")}}</li>
 <li>{{SVGAttr("keyPoints")}}</li>
 <li>{{SVGAttr("rotate")}}</li>
 <li>{{SVGAttr("origin")}}</li>
</ul>

<h2 id="DOM_интерфейс">DOM интерфейс</h2>

<p>Этот элемент реализует интерфейс {{domxref("SVGAnimateMotionElement")}}.</p>

<h2 id="Пример">Пример</h2>

<h3 id="SVG">SVG</h3>

<pre class="brush: html; highlight[18-20]">&lt;?xml version="1.0"?&gt;
&lt;svg width="120" height="120" viewBox="0 0 120 120"
    xmlns="http://www.w3.org/2000/svg" version="1.1"
    xmlns:xlink="http://www.w3.org/1999/xlink"&gt;

  &lt;!-- Рисуем серый контур движения с двумя
       маленькими кружками в ключевых точках --&gt;
  &lt;path id="theMotionPath" stroke="lightgrey" stroke-width="2" fill="none"
        d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" /&gt;
  &lt;circle cx="10" cy="110" r="3" fill="lightgrey"  /&gt;
  &lt;circle cx="110" cy="10" r="3" fill="lightgrey"  /&gt;

  &lt;!-- Рисуем красный круг, который будет перемещаться
       вдоль траектории движения. --&gt;
  &lt;circle cx="" cy="" r="5" fill="red"&gt;

  &lt;!-- Определяем анимацию пути движения --&gt;
    &lt;animateMotion dur="6s" repeatCount="indefinite"&gt;
      &lt;mpath xlink:href="#theMotionPath"/&gt;
    &lt;/animateMotion&gt;
  &lt;/circle&gt;
&lt;/svg&gt;</pre>

<h3 id="Результат">Результат</h3>

<p>{{EmbedLiveSample("Пример", 120, 120)}}</p>

<h2 id="Характеристики">Характеристики</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("SVG Animations 2", "#AnimateMotionElement", "&lt;animateMotion&gt;")}}</td>
   <td>{{Spec2("SVG Animations 2")}}</td>
   <td>Без изменений</td>
  </tr>
  <tr>
   <td>{{SpecName('SVG1.1', 'animate.html#AnimateMotionElement', '&lt;animateMotion&gt;')}}</td>
   <td>{{Spec2('SVG1.1')}}</td>
   <td>Начальное определение</td>
  </tr>
 </tbody>
</table>

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>

<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>  и отправьте нам запрос на перенос.</div>

<p>{{Compat("svg.elements.animateMotion")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>{{SVGElement("mpath")}}</li>
</ul>