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