diff options
Diffstat (limited to 'files/ru/web/svg/element/animatemotion/index.html')
| -rw-r--r-- | files/ru/web/svg/element/animatemotion/index.html | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/files/ru/web/svg/element/animatemotion/index.html b/files/ru/web/svg/element/animatemotion/index.html new file mode 100644 index 0000000000..3b1259dcb3 --- /dev/null +++ b/files/ru/web/svg/element/animatemotion/index.html @@ -0,0 +1,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> |