1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
---
title: <animateMotion>
slug: Web/SVG/Элемент/animateMotion
tags:
- SVG
- svg анимация
- Элемент
translation_of: Web/SVG/Element/animateMotion
---
<div>{{SVGRef}}</div>
<p>Элемент <strong><code><animateMotion></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]"><?xml version="1.0"?>
<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">
<!-- Рисуем серый контур движения с двумя
маленькими кружками в ключевых точках -->
<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" />
<circle cx="10" cy="110" r="3" fill="lightgrey" />
<circle cx="110" cy="10" r="3" fill="lightgrey" />
<!-- Рисуем красный круг, который будет перемещаться
вдоль траектории движения. -->
<circle cx="" cy="" r="5" fill="red">
<!-- Определяем анимацию пути движения -->
<animateMotion dur="6s" repeatCount="indefinite">
<mpath xlink:href="#theMotionPath"/>
</animateMotion>
</circle>
</svg></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", "<animateMotion>")}}</td>
<td>{{Spec2("SVG Animations 2")}}</td>
<td>Без изменений</td>
</tr>
<tr>
<td>{{SpecName('SVG1.1', 'animate.html#AnimateMotionElement', '<animateMotion>')}}</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>
|
