Revision 427683 of animateMotion

  • Revision slug: Web/SVG/Element/animateMotion
  • Revision title: animateMotion
  • Revision id: 427683
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment Update linksSVG/Element/animateMotion Web/SVG/Element/animateMotion

Revision Content

{{ SVGRefElem() }}

The animateMotion element causes a referenced element to move along a motion path.

Usage context

Categories Animation element
Permitted content Any number of the following elements, in any order:
Descriptive elements »

And at most one {{ SVGElement("mpath") }} element
Normative document SVG 1.1 (2nd Edition)

Example

Source code Output result
{{ embed_text("animateMotion.svg", "xml") }} {{ EmbedSVG("animateMotion.svg",120,120) }}

» animateMotion.svg

Attributes

Global attributes

Specific attributes

  • {{ SVGAttr("calcMode") }}
  • {{ SVGAttr("path") }}
  • {{ SVGAttr("keyPoints") }}
  • {{ SVGAttr("rotate") }}
  • {{ SVGAttr("origin") }}

DOM Interface

This element implements the SVGAnimateMotionElement interface.

  • {{ SVGElement("mpath") }}

Revision Source

<p>{{ SVGRefElem() }}</p>
<p>The <code>animateMotion</code> element causes a referenced element to move along a motion path.</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="row">Categories</th>
      <td>Animation element</td>
    </tr>
    <tr>
      <th scope="row">Permitted content</th>
      <td>Any number of the following elements, in any order:<br />
        <a href="/en-US/docs/SVG/Element#Descriptive" title="en/SVG/Attribute#Descriptive">Descriptive elements</a>&nbsp;»<br />
        <br />
        And at most one {{ SVGElement("mpath") }} element</td>
    </tr>
    <tr>
      <th scope="row">Normative document</th>
      <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#AnimateMotionElement" title="http://www.w3.org/TR/SVG/animate.html#AnimateMotionElement">SVG 1.1 (2nd Edition)</a></td>
    </tr>
  </tbody>
</table>
<h2 id="Example">Example</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="col">Source code</th>
      <th scope="col">Output result</th>
    </tr>
    <tr>
      <td>{{ embed_text("animateMotion.svg", "xml") }}</td>
      <td>{{ EmbedSVG("animateMotion.svg",120,120) }}</td>
    </tr>
  </tbody>
</table>
<p>» <a href="/files/3261/animateMotion.svg" title="/files/3261/animateMotion.svg">animateMotion.svg</a></p>
<h2 id="Attributes">Attributes</h2>
<h3 id="Global_attributes">Global attributes</h3>
<ul>
  <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a>&nbsp;»</li>
  <li><a href="/en-US/docs/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a>&nbsp;»</li>
  <li><a href="/en-US/docs/SVG/Attribute#AnimationEvent" title="en/SVG/Attribute#AnimationEvent">Animation event attributes</a>&nbsp;»</li>
  <li><a href="/en-US/docs/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Xlink attributes</a>&nbsp;»</li>
  <li><a href="/en-US/docs/SVG/Attribute#AnimationTiming" title="en/SVG/Attribute#AnimationTiming">Animation timing attributes</a>&nbsp;»</li>
  <li><a href="/en-US/docs/SVG/Attribute#AnimationValue" title="en/SVG/Attribute#AnimationValue">Animation value attributes</a>&nbsp;»</li>
  <li><a href="/en-US/docs/SVG/Attribute#AnimationAddition" title="en/SVG/Attribute#AnimationAddition">Animation addition attributes</a>&nbsp;»</li>
  <li>{{ SVGAttr("externalResourcesRequired") }}</li>
</ul>
<h3 id="Specific_attributes">Specific attributes</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.C2.A0Interface">DOM&nbsp;Interface</h2>
<p>This element implements the <code><a href="/en-US/docs/DOM/SVGAnimateMotionElement" title="en/DOM/SVGAnimateMotionElement">SVGAnimateMotionElement</a></code> interface.</p>
<h2 id="Related">Related</h2>
<ul>
  <li>{{ SVGElement("mpath") }}</li>
</ul>
Revert to this revision